Responsive design with 3 columns

Question

I've spent the day updating a webpage from tables to responsive divs, the result is that the page looks exactly as it did before I started on a laptop but now on a mobile phone the page is one long perfect column. The problem is that it doesn't look so great on mid sized screens, namely iPad.

I used float:left; display: inline; to get the divs to drop under each other when the width isn't enough to house them, but the problem is that much of the site uses 3 columns. The result is that on mid sized screens there are instances where 2 divs are next to each other and the third is on the next line, to see for yourself mess around with your browser width on this page. I guess what I'm looking for is a way to have all three divs either on one line, or each on their own line. I'm also happy to listen to other ideas.

I have reasonable knowledge of HTML, CSS, jQuery, but I'm really lost how to fix this without a major overhall which is simply not possible given deadlines.

Answer 1

In the end I moved away from media queries because they didn't produce the results. jQuery came to the rescue:

<script>//mobile responsiveness
var width = jQuery(window).width();
function ipad() {
if (width <= 1024 && width >= 768){ //if tablet
//css here

} else if (width < 768){  //if mobile phone
//css here
}
}

jQuery(document).ready(function () {
ipad();//run when page first loads
});

jQuery(window).resize(function () {
ipad();//run on every window resize
});
</script>

Answer 2

Using a grid system will be easy, such as the one in twitter bootstrap.

http://getbootstrap.com/

There are basically four kind of sizes of screen boundaries: large, medium, small and extremely small. You can check the sample and illustration on the official website.

You need to link the bootstrap css file and then add a class into your div.

The pro for bootstrap is that it is easy and fast. However, if you need to customize the design, you need to write extra code for it. i.e using media query in css.

Sometimes, using JavaScript to detect the width of screen or element is also an option. If you need a lot of different versions of layout, JavaScript is better.

Answer 3

The first step would be to remove all tables as this method is very outdated and does not give you the control or flexibility you need for different screen sizes when using media queries.

I would go for the mobile first approach and set your style sheet like in this layout.

#re2 {
  float: left;
  width: 100%; /* by default every column would be 100% width for mobile and in this example anything smaller then 641px wide */
}

No need for a media query as this will be for mobile and all base styles, i.e. all columns will be 100% width.

Medium screens

Include styles for screen sizes above 641px

@media only screen and (min-width: 641px) {
  #re2 {
    width: 33.333333%; /* makes this element 1/3 of the overall width for devices above 641px wide */
  }
}

Large screens

Include styles for screen sizes above 1025px

@media only screen and (min-width: 1025px) {
  #re2 {
    width: 50%; /* makes this element half of the overall width for devices above 1025px wide */
  }
}