Floating Characteristic in CSS Mobile

Web Design (WordPress, Joomla, etc.)

Floating Characteristic in CSS Mobile

Posted by Josh Spivack on June 25, 2014 at 12:11 am

I have a question as to why a float prefrence overrides other css code within my mobile section.
For instance, on bakedfx.com/kyke, you’ll see a browser site displayed with a quote, in this case #proquote2, to the image’s left (#profile_pic2) On the mobile version however, the picture and the quotation are on top of each other.
I jumped into the CSS and noticed there were no mobile configurations for these divisions. I added them where other mobile specifications were. This had to be done for the titles, as well, but those created no problems.
Basically, the issue lies when I alternate between float:none; and float:right;. At the top of both of these, I have a margin-top:170px !important; (I also have tried it w/o the !important). When it’s set to float:none; (image A), the text is on top of the image but is correctly formatted between the left and right margins. The second image is switched to float:right;, incorrectly formatted within the margins (it’s cut off) but the CSS takes the margin-top demand and sets it under the image.

A: margin-top:170px;
clear:none;
float:none;

B. margin-top:170px;
clear:none;
float:right;

How can I have cake and eat it here? I want float:none; to work WITH the margin-top command.
I also tried adding the image itself, #profile_pic2, to the mobile site (though it had been displayed correctly). I added a line position:relative; and this put the text behind the image, and seemed to get me closer. C
urrently my CSS is set to A without that position relative on #profile_pic2.

Thanks for any help!
Josh

Josh Spivack replied 11 years, 10 months ago 2 Members · 2 Replies
2 Replies

Curtis Thompson
June 25, 2014 at 12:46 am

hello,

can you restore the page at bakedfx.com/kyke so that we can see it in action? your description is hard for me to visualize to give you any good advice.

thanks,
sitruc
Josh Spivack
June 25, 2014 at 1:38 am

Yes of course, sorry. It is restored to the “right” formatting with the text over the image.
Here’s the specific code regarding these divisions:

}

#proquote2 {
width:27em;
float:right;
display:inline;
margin-top:-4em;
margin-bottom:3em;
margin-right:-6em;
}

In the @media only screen and (min-device-width: 320px) and (max-device-width: 480px){ section below above code.
}
#proquote2{
margin-top:170px;
clear:both;
float:none;
}

}
#profile_pic2 {
float:left;
margin-right:1em;
margin-bottom: -5em;
vertical-align:text-top;
width:350px;
}
In the @media only screen and (min-device-width: 320px) and (max-device-width: 480px){ section below above code.
}
#profile_pic2{
clear:none;
width:auto%;
}
I just need to lower the proquote2 in the mobile version only. float:none; is right formatting, wrong vertical placement–I don’t seem to have vertical controls after that.
Thanks again,
Josh

Reply to this Discussion! Login or Sign Up

Creative Communities of the World Forums