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.
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>