Left box floats text to the left only in a certain screen size

HTML & CSS
1

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>

.j8 {
padding: 10px 0 0px 0;
height: auto;
width: 100%;
background-color:#ffffff;
color: #;
}


.box8 {
   margin:1px 2px 0px 2px;
   padding:0px 8px 0px 8px;
   
}

.box8.left {
text-align:top;
border:1px solid #;
padding:16px 3px 0px 7px;
margin:0;
font-size:18px;
}

.box8.right {
 text-align:top;
 border:1px solid #;
padding:26px 7px 0px 2px;
margin:0;
font-size:18px;
}

.box8.center {
 text-align:top;
 border:1px solid #;
padding:0px;
margin:10px 0 10px 0;
}


@media screen and (max-width:600px) {
	.nowrap{display:block;
	text-align:center;
	}
	
	.box8.left{
	padding:2% 0 2% 6%;
	margin:2%;
	background-color:#ffffff;
	font-size:20px;
	font-weight: 300;
	font-family:"Open sans", Helvetica, Arial";
	float:right;
	}
	
		.box8.center{
		padding:16px 0px 0px 0px;
		margin:0 0 18px 0;
		border:1px solid #;
		background-color:#ffffff;
	}
	
	.box8.right{
	padding:2% 6% 0 0;
	margin:2%;
	background-color:#ffffff;
	border:1px solid #;
	font-size:20px;
	font-weight: 300;
	font-family:"Open sans", Helvetica, Arial";
	float:left;
	}
	.box8 p{
	margin:0;
	}
}


.nowrap1 {
   display: flex;
   flex-flow: row nowrap;
   justify-content: center;
}


.nowrap {
margin:1px;
   display: flex;
   flex-flow: row wrap;
}

779×384 43.6 KB

1142×165 51.8 KB

2

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.

Add the following outline to the .box8 CSS.

.box8 {
    outline:1px solid red;  /* ADD Me */
    padding:0px 8px 0px 8px;
    margin:1px 2px 0px 2px;
 }

Validate your code then try the following test…

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.

1 Like
3

Sett the outer items to take up the available space.

e.g.

.box8.left,
.box8.right {flex:1 0 0%;}

Also fix all the errors in that code first :slight_smile:

1 Like
4

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.

Thanks for the suggestions

5

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.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.