Html/css looks good until it's a different view size

HTML & CSS
1

In a container, I’m trying to simply have some Header Text in a row along the top, and two Boxes side-by-side (LeftBox and RightBox) below that. The code I have displays successfully on my desktop screen, and even on my phone screen, but when I turn my phone horizontally, the Header Text and the LeftBox are in the same row, and the RightBox is below them. Any help with keeping the Header Text above it all, (so the LeftBox and RightBox are in a row together when it’s a different view) will be appreciated. Here’s my code:

.jumbo {
padding:10px 0px 15px 0px;
height: auto;
width: 100%;
display: flex;
flex-flow: wrap;
justify-content: center;
background-color: #200843;
}

#LeftBox1 {
color:#dcdcdc;
border: 1px solid #696969;
border-width: 1px;
width:100%;
height:100%;
margin: 2px auto;
padding: 0px 5px 0px 25%;
background-image:url('../images/t0.png');
background-repeat:no-repeat;
display: inline-flex;
}

#RightBox1 {
color:#888f97;
border: 1px solid #696969;
border-width: 1px;
width:100%;
height:100%;
font-size: 20px;
font-weight:420;
font-family:"Open sans", Helvetica, Arial;
margin: 2px auto;
padding: 4px 5px 0px 25%;
background-image:url('../images/c5.png');
background-repeat:no-repeat;
display: inline-flex;
}

<div class="jumbo">
<div class="container text-center">
<h4><p style="color:#ffffff;">Header Text<br></p></h4>
</div>
<div class="col-sm-6">
<div id="LeftBox1">
<p style="font-size:17px; color: #888F97;">LeftBox Text</p>
</div>
</div>

<div class="col-sm-6">
<div id="RightBox1">
 <p style="font-size:17px; color: #888F97;">RightBox Text</p>
</div>
</div>
</div>
1 Like
2

Hi,
That’s what I see on desktop when running the code you posted, of course I may be missing some of your bootstrap styles. I looks like a mistake.

588×172 114 KB

Wrap your boxleft and boxright in a parent div, then move your flex rules there. Then you can set to flex-flow: row nowrap; if you don’t want them wrapping.

It should produce this for all screens…

377×168 3.16 KB

Just keep the code simple. No need for any flex rules on the header text if you want it on top. It could also just be an h tag but I wrapped a div around it.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
.jumbo {
   padding:10px 0;
   background-color: #200843;
}
.header {
   text-align:center;
   color:#fff;
}
.nowrap {
   display: flex;
   flex-flow: row nowrap;
   justify-content: center;
}
.box {
   margin:2px;
   padding:0 20px;
   border:1px solid #696969;
   font-size:1.1em;
   color:#888F97;
}
.box.left {
   background:blue url('../images/t0.png') no-repeat;
}
.box.right {
   background:lime url('../images/c5.png') no-repeat;
}

</style>

</head>
<body>

<div class="jumbo">
   <div class="header">
      <h1>Header Text</h1>
   </div>
   <div class="nowrap">
      <div class="box left">
         <p>LeftBox Text</p>
      </div>
      <div class="box right">
         <p>RightBox Text</p>
      </div>
   </div>
</div>

</body>
</html>
2 Likes
3

Very helpful. Thanks for taking the time to enlighten me

1 Like
5

Did that work?

Have you also looked into the style “clear,” to get the rows to stack?

6

That would not be appropriate here, as clear is specifically to clear floats, which the OP is not using.

5 Likes
7

Yep! One less thing to try, thanks to this sound advice.

Thanks.

8

Thanks again.

How can I change this so that ‘Header’ is in a column on the left, and in the column on the right ‘Left Box’ and ‘Right Box’ are rows stacked on top of each other? I tried many things (and searched) without success. Any help will be appreciated.

9

Would you like to post a working page complete with surrounding (outer, etc.) boxes so we can see your current code? (as requested in the posting guidelines).

10

Since the code in your first post was using flexbox…

A search for “flexbox layout” would have lead you in the right direction.
Then all you needed to do was apply yourself to those references. That’s how most of us around here learn, by reading the specs and putting those concepts into practice.

Try this example

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Header Columns</title>
<style>
.jumbo {
  display: flex;
  flex-flow: row nowrap; /*change to 'row wrap' for columns to stack before text wraps*/
  justify-content: space-around;
  padding: 5px;
  background-color: #200843;
}
.col {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  margin: 5px;
  text-align: center;
}
.header {
  padding: 0 20px;
  border: 1px solid #696969;
  color: #fff;
}
.box {
  padding:15px;
  border: 1px solid #696969;
  font-size: 1.1em;
  color:#888F97;
}
.box.one {
  background: blue url('../images/t0.png') no-repeat;
  margin-bottom: 10px;
}
.box.two {
  background: lime url('../images/c5.png') no-repeat;
}
</style>

</head>
<body>

<div class="jumbo">
   <div class="col header">
      <h1>Header Text</h1>
   </div>
   <div class="col">
      <div class="box one">Box One Text</div>
      <div class="box two">Box Two Text</div>
   </div>
</div>

</body>
</html>
1 Like
11

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