CODEWITHSUNDEEP
jqueryhtmlcss
Dan
Dan

Reputation: 3358

HTML Columns layout depending on screen resolution

I am seeking a jQuery or CSS technique to make the number of columns on a website layout increase and decrease depending on the site of your viewport. For example, an iphone would have 1 column, 800x600 would have 2, 1024x768 would have 3...and so on

Any Ideas?

Upvotes: 0

Views: 3383

Answers (5)

David d C e Freitas
David d C e Freitas

Reputation: 7521

Here are a few projects that solve this issue and are at the forefront of dynamic css and screen sizes:

  • 320 and up:

    ‘320 and Up’ prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point.

  • Lessframework:

    Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.

Upvotes: 2

Alan L.
Alan L.

Reputation: 380

If you do it with jQuery -

First, define a class for your content wrapper that could make the page the appropriate # of layouts, for example

<div id="page" class="1_column">Content</div>

Next, you'd need a function that could change the class of that wrapper element based on the values of

$(window).height(); 
$(window).width();

Then you'd need to an event listener to your function that both on page resize and on page load events

$(window).load(myFunction);
$(window).resize(myFunction);

The columns would ultimately be left up to your stylesheet, and you'd use display, width and float values to arrange divs into columns when appropriate.

Upvotes: 0

Chad Lundgren
Chad Lundgren

Reputation: 378

You can use media queries for this, with jQuery as a fallback for Internet Explorer 8 or lower.

Here's an example of the middle resolution: 

@media screen and (min-width: 800px) and (max-width: 1024px) {

    .col1 {.... /* rules go here */ }
    .col2 {.... } /* rules go here */
   }

I've noticed that CSS users who have never programmed tend to freak out when they see the nested curly braces, but two levels is nothing for anyone who has programmed.

Upvotes: 2

bleepzter
bleepzter

Reputation: 10005

The article I've looked at swaps the document's stylesheet based on the screen size. For this to work you'd have to know the screen resultions that you need to target and create a style sheet for each.

check the following url: hhttp://www.ilovecolors.com.ar/detect-screen-size-css-style/

Upvotes: 0

Sarfraz
Sarfraz

Reputation: 382796

Check out the CSS Media Queries

Alternatively, you can go for Different Stylesheets for Differently Sized Browser Windows

Upvotes: 2

Related Questions