[responsive design] Change number of box per row based on the screen size

How will it looks?

Do you ever need to put a different size for the product / item listing but want to have a little more control than just 25% and let them stretch accordingly? Let’s take a look at the example here, I’ve put a couple of different numbers for the column for different screen.

 

This is how it looks like in my screen, I’m using a 14 inch laptop, it can go with more item in a row if you have a bigger screen.

Change-number-of-item-display-in-a-row

 

This is how it looks like in a smaller tablet.

Change-number-of-item-display-in-a-row2

 

 

And this is how it will looks on the mobile.

Change-number-of-item-display-in-a-row3

You can test it out with the Live Demo: http://codinglover.com/demo/responsive_box/

 

Get you layout ready

First of all, you will need a DIV with class “boxcols” , and all item with class “box”. 

box-layout

The CSS

.box{float:left;}

.box .thumb{float:left;width:90%;padding:0px 5%;}
.box .thumb img{float:left;width:100%;height:auto;}
.box .title{
float:left;width:90%;padding:3px 5%;
font-weight:bold;font-size:20px;
} .box .desc{float:left;width:90%;padding:0px 5%;height:100px;}

 

You don’t have to set a width for the box for now. But make sure you put the image width to 100% and height to auto so that it could stretch the image size accordingly.

 

Include the meta viewport

 In order for this tutorial to work well, you will need to include this into the, it will auto resize the page based on the device size. 

 <meta name=”viewport” content=”width=device-width”>

 

Wait! Don’t forget the javascript!

1) Include the jquery library from google

  <script src=”//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>

2) Include the main.js

 

Let’s take a look at what the javascript does. We have a function called calBoxCol()

function calBoxCol(){
	var contentWidth = $('.boxcols').width();
	var boxCols = 0;var boxwidth='';
	if (contentWidth > 1900){
		boxCols = 7;
		boxwidth = Math.floor(contentWidth / boxCols) * 0.99;
	} else if (contentWidth < 1900 && contentWidth > 1400 ) {
		boxCols = 6;
		boxwidth = Math.floor(contentWidth / boxCols) * 0.99;
	} else if (contentWidth < 1400 && contentWidth > 1000 ){
		boxCols = 5;
		boxwidth = '20%';
	} else if (contentWidth < 1000 && contentWidth > 800 ){
		boxCols = 4;
		boxwidth = '25%';
	} else if (contentWidth < 800 && contentWidth > 640 ){
		boxCols = 3;
		var boxwidth = '33.3%';
	} else if (contentWidth < 640 && contentWidth > 480 ){
		boxCols = 2;
		boxwidth = '50%';
	} else if (contentWidth < 480){
		boxCols = 1;
		boxwidth = '100%';
	}
	$('#totalbox').html(boxCols); //you can remove this
	$('#currentwidth').html(contentWidth+'px'); //you can remove this
	$(".boxcols .box").css("width",boxwidth);
}

 Basically, it calculates the width of the .boxcols div, and set a different number of item based on it! Just that simple~ of course, you can change the number of box in a row depends on your design needs.  

You can remove the #totalbox and #currentwidth as I only put it in for you to debug easily.

 

Now we have the function to do the calculation, you will need to tell the browser to call that function when the page load as well as when the screen has been resize.

$(window).resize(function() {
	calBoxCol();
});

$(window).load(function(){
	calBoxCol();
});

 That’s all we need. Download the demo for a simple structure for the tutorial, it should help you to get a better picture of how the things work. Feel free to ask if you have any question. =)

 

Click here to download the demo

Leave a Reply

Your email address will not be published. Required fields are marked *