CODEWITHSUNDEEP
cssresponsive-designmedia-queries
Tog Porter
Tog Porter

Reputation: 441

Columns not behaving correctly on small screen

I have a web page which displays 2 columns. On a PC the two columns display exactly as I want them, but something goes wrong when viewed on a mobile screen.

On mobile screen I want the second column to drop below the first column and I want both columns to be centered on the screen, but what happens is that the first column is on the left of the screen and the second column (which is a Facebook feed) is too wide for the screen, even though I set the width at 80%.

Here is my html:

<div class="section group">
<div class="col span_1_of_2">
<img class="img11" src="images/trout.jpg" alt="trout" title="The Trout Inn">
<hr style="width: 100%"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus neque eu felis condimentum ullamcorper. Aliquam erat volutpat. Phasellus viverra lectus dignissim ex ultricies ornare. Donec interdum massa non neque consectetur, eget molestie libero faucibus. Nulla gravida finibus libero, eu dictum turpis porta a. Donec ex tellus, dictum et massa eget, mattis suscipit justo. Vivamus tempus enim at nibh lobortis semper vitae sed mi. Mauris efficitur ipsum a nulla ultricies, sed ultrices ligula dignissim
</div>
<div class="col span_2_of_2">
<label>Our Facebook Feed</label>
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Ftesttest%2F&tabs=timeline&width=340&height=1000&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=999999" width="340" height="1000" style="border:none;overflow:hidden" allow="encrypted-media"></iframe>
</div>
</div><!-- section  group -->

and here is my css:

/*  SECTIONS  */
.section {
    clear: both;
    padding: 0px;
    margin: auto;
    width: 60%;
    }

/*  COLUMN SETUP  */
.col {
    display: block;
    float:left;
    margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }


/*  GROUPING  */
.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 */
}

/*  GRID OF TWO  */
.span_1_of_2 {
    width: 63.1%;
padding-right: 15px;
border-right-style: solid;
border-color: #444444;
border-width: 1px;
}
.span_2_of_2 {
    width: 32.2%;
}

/*  IF screen is LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
/*  SECTIONS  */
.section {
    clear: both;
    padding: 0px;
    margin: auto;
    width: 90%;
    }

/*  COLUMN SETUP  */
.col {
    display: block;
    margin: auto;
}
.col:first-child { margin-left: 0; }


/*  GROUPING  */
.group:before,
.group:after {
    content:"";
    display:block;
margin: auto;
}
.group:after {
    clear:both;
}

/*  GRID OF THREE  */
.span_1_of_2 {
padding: 0px;
border: none;
display: block;
margin: auto;
    width: 70%;
}
.span_2_of_2 {
padding: 0px;
border: none;
display: block;
margin: auto;
    width: 50%;
}
}

I have tried changing lots of parameters in the css but cannot make it work and now I am lost for options.

Can anyone help me to get these columns aligned?

Many Thanks

Tog

Upvotes: 0

Views: 266

Answers (1)

Andreas Traganidas
Andreas Traganidas

Reputation: 513

by using flex & flex direction you can change how the columns are placed.

you can read more here https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 

.section{display:flex;flex-direction:column;}
.span_1_of_2{flex:1;padding:5px;}
.span_2_of_2{flex:1;padding:5px}

@media screen and (min-width:768px){
.section{display:flex;flex-direction:row;}
}
<div class="section group">
<div class="col span_1_of_2">
  <img class="img11" src="images/trout.jpg" alt="trout" title="The Trout Inn">
  <hr style="width: 100%"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus neque eu felis condimentum ullamcorper. Aliquam erat volutpat. Phasellus viverra lectus dignissim ex ultricies ornare. Donec interdum massa non neque consectetur, eget molestie libero faucibus. Nulla gravida finibus libero, eu dictum turpis porta a. Donec ex tellus, dictum et massa eget, mattis suscipit justo. Vivamus tempus enim at nibh lobortis semper vitae sed mi. Mauris efficitur ipsum a nulla ultricies, sed ultrices ligula dignissim
  </div>
<div class="col span_2_of_2">
  <label>Our Facebook Feed</label>
  <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Ftesttest%2F&tabs=timeline&width=340&height=1000&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=999999" width="340" height="1000" style="border:none;overflow:hidden" allow="encrypted-media"></iframe>
  </div>
</div><!-- section  group -->

Upvotes: 1

Related Questions