CODEWITHSUNDEEP
htmlcssmultiple-columns
Kev Hopwood
Kev Hopwood

Reputation: 149

3 column layout to display as 1 on mobile

I am currently working on my website located over at www.a1cleaningservicesnw.com on my services page I have the following code. 

    <div class="container">
   <div class="column-center" align="center"><h1>Carpet and upholstery cleaning</h1><br><br>
<div align="center"> <img src="upholstery-cleaning.jpg" alt="Carpet and upholstery cleaning" width="200" height="150"></div><br><br>

<a href="#" style="color: #0b739e; font-size: 15px;">Read More...</a>
</div>


   <div class="column-left" align="center"><h1>End of tenancy cleans</h1><br><br>
<div align="center"> <img src="End-of-tenancy.jpg" alt="End of tenancy" width="200" height="150"></div><br><br>

<a href="#" style="color: #0b739e; font-size: 15px;">Read More...</a>
</div>


   <div class="column-right" align="center"><h1>Rug cleaning</h1><br><br>
<div align="center"> <img src="rug-cleaning.jpg" alt="Rug cleaning" width="200" height="150"></div><br><br>

<a href="#" style="color: #0b739e; font-size: 15px;">Read More...</a>
</div>
</div>
<div style="clear:both"></div>
<hr>

With this css

.column-left{ float: left; width: 33%; } .column-right{ float: right; width: 33%; 4}.column-center{ display: inline-block; width: 33%; }

What I was wondering is this: instead of it showing 3 columns on All versions and devices. When the screen size gets too small for a 3 column layout. How do I get it to display it as a single column instead? One under the other? I do not want to wright it all out again without the column tags.

Please help

Thank you. Kevin.

Upvotes: 1

Views: 1444

Answers (4)

emmanuel
emmanuel

Reputation: 9615

You could add a media query to change columns width to 100% for the specified screen width range.

@media (max-width: 700px) {
  .column-left,
  .column-center,
  .column-right {
    width: 100%;
  }
}

Reference: CSS media queries

Upvotes: 1

kurroman
kurroman

Reputation: 976

You should try Bootstrap grid system. I have been working with Bootstrap last two years and its very easy to learn/use. No more headache with responsive columns :)

http://getbootstrap.com/css/#grid

Upvotes: 0

user3687550
user3687550

Reputation: 57

@media only screen and ( max-width: 479px ) {
   .column-left, .column-center, .column-right {
     width: 100%;
  }
}
@media only screen and ( max-width: 768px) {
   .column-left, .column-center, .column-right {
     width: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
   .column-left, .column-center, .column-right {
     width: 100%;
  }
}

Hope this was helpfull

Upvotes: 1

Thiyagesh
Thiyagesh

Reputation: 411

responsive for below ipad 

.column-left{ float: left; width: 33%; } 
.column-right{ float: right; width: 33%; }
.column-center{ display: inline-block; width: 33%; }

@media (max-width: 767px) {
.column-left{ float: left; width: 100%; } 
.column-right{ float: right; width: 100%; }
.column-center{ display: inline-block; width: 100%; }  
}
<div class="container">
   <div class="column-center" align="center"><h1>Carpet and upholstery cleaning</h1><br><br>
<div align="center"> <img src="upholstery-cleaning.jpg" alt="Carpet and upholstery cleaning" width="200" height="150"></div><br><br>

<a href="#" style="color: #0b739e; font-size: 15px;">Read More...</a>
</div>


   <div class="column-left" align="center"><h1>End of tenancy cleans</h1><br><br>
<div align="center"> <img src="End-of-tenancy.jpg" alt="End of tenancy" width="200" height="150"></div><br><br>

<a href="#" style="color: #0b739e; font-size: 15px;">Read More...</a>
</div>


   <div class="column-right" align="center"><h1>Rug cleaning</h1><br><br>
<div align="center"> <img src="rug-cleaning.jpg" alt="Rug cleaning" width="200" height="150"></div><br><br>

<a href="#" style="color: #0b739e; font-size: 15px;">Read More...</a>
</div>
</div>
<div style="clear:both"></div>
<hr>

Upvotes: 1

Related Questions