CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-design
DomX23
DomX23

Reputation: 887

How to make items responsive?

I'm new to front end work and making sites responsive, so I'm wondering how would I go about making sure that regardless of screen size the space between items is always 20px.

For instance when the screen is not resize it looks fine: enter image description here

However, when I resize it down a little the spaces between each item is gone. enter image description here

Then when it is resized further down it goes to 2 items per row which is what I want, but I only want there to be 20px between the items unlike how they appear below:

enter image description here

I'm using bootstrap 3 and displaying the items within the following:

 <div class="col-md-3 col-sm-6" id="animateslide">

   <div class="article" id="testarticediv" >

     Items being displayed here....
   </div>
</div>

I added the following to my own main.css file:

@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}

Upvotes: 1

Views: 1583

Answers (3)

sudhan kantharuban
sudhan kantharuban

Reputation: 2125

It can be achieved by setting width to div/boxes using css calc property , this is the logic to set width of each div, that will make 20px space in all screen sizes :

width: calc( ( full width - total calculated space b/w grid ) / total no:of grid );

/* Four Column Layout */
@media(min-width:1200px){
   width: calc( ( 100% - ( 20px * 3 ) ) / 4 ); 
}


/* Three Column Layout */
@media(min-width:800px){
   width: calc( ( 100% - ( 20px * 2 ) ) / 3 ); 
}

/* Two Column Layout */
@media(min-width:650px){
   width: calc( ( 100% - ( 20px * 1 ) ) / 2 ); 
}

Upvotes: 2

Paul McLoughlin
Paul McLoughlin

Reputation: 2289

Have you tried padding each item with 10px at the relevant borders? Two items with a padding of 10px next to each other would equal a 20px.

Upvotes: 0

MichaelM
MichaelM

Reputation: 1109

Just add to each box:

    margin: 0px 10px;

This will set the top and bottom margins to 0 (change this to whatever you desire) and set the left and right margins to 10px. There should then be 20px worth of margins between each item.

Upvotes: 1

Related Questions