My text looks balanced in the desktop full screen view, and the iphone vertical view (see vertical attached image), but when I turn the iphone horizontally it seems the left box text floats left too much (see horizontal image attached). Any suggestions would be appreciated. Here’s the code:
<div class="j8">
<div class="nowrap1">
<div class="box8 left">
<span style="color:#696969; font-weight:300; font-family:Open sans;">Text text text text texttex text text text, texttext or text text<br></span>
</div>
<div class="box8 center">
<span><img src="/images/bulb.png" style="max-width: 100vw; height:auto; width:auto; max-height:100vh;"></span>
</div>
<div class="box8 right">
<span style="color:#696969; font-weight:300; font-family:Open sans;">text text text text text text text text text text ~ text text</span>
</div>
</div>
ChrisjChrisj, I believe you’ve been asked several times to post your code in the form of a “working page” (or post a link to your site) so we can see what you see. Posting invalid snippits is annoying at least and useless at worse.
PLEASE post your code in the form of a working page - starts with doctype, contains a head section with usable CSS, a body section with valid HTML, and ends with close html.
Why is the CSS for the spans written inline instead of in the CSS???
Where is our copy of the light bulb image?
This “issue” seems to be a case of expectations vs the actual media query width.
Vary the width of the desktop view (measure the browser width when the change occurs) then compare that to the width of the wide view of the mobile device. See what you think
I do not have an iThing on which to test so please let us know what you find.
EDIT: the width of the left and right boxes, therefore the placement of the center box with the light bulb, depends on the amount of text in the end boxes.
Thanks for the replies.
Regarding “PLEASE post your code in the form of a working page - starts with doctype, contains a head section with usable CSS, a body section with valid HTML, and ends with close html”. Some people don’t want to wade through a lot of code, so I thought it would be more efficient to provide just the code in question.
But we DO need to be able to see what you see, ie your valid, working code. Reading valid, selected working code is not a problem. Guessing how the code is behaving and the context around it, ie what else could be influencing it, IS a disrespectful, inefficient use of our time. Please be respectful of our time and provide valid working code. That does not mean post the code for your entire site. It means post a working example using only the code that is necessary to show us what you see and the environment (context) affecting it.
It’s OK if it takes you a few minutes to set it up before posting.
The request to post a working page is in our posting guidelines, a request to post discretionarily less code isn’t.