CODEWITHSUNDEEP
cssresponsive-design
user1221565
user1221565

Reputation:

Make a div smaller and bigger depending on width size

I'm trying to have a grid of 8 items, when the browser's width gets smaller, I want the divs to get smaller, when the browser increases I want the divs to get bigger but only to a certain size.

Please find attached my demo here: http://jsfiddle.net/4qnzdhpz/

You'll notice that when the browser width is small the boxes overlap, this is why I want to make them smaller, at the moment they are 70px, I'm thinking the best way would be to use percentage but I only want them to go to a certain size so I'm guessing i'll need to use max-width and possibly min-width.

Here's a snippet of the css I am using for the div boxes, the rest of the css is in the fiddle.

.box {
width:70px;
height:70px;
background:green;
border: 2px solid black;
border-radius: 10px;
position: relative;
display: block;
top: 10%;
left: 50%;
-webkit-transform: translate(-50%, -50%) rotate(-23deg) ;
   -moz-transform: translate(-50%, -50%) rotate(-23deg) ;
     -ms-transform: translate(-50%, -50%) rotate(-23deg) ;
        -o-transform: translate(-50%, -50%) rotate(-23deg) ;
              transform: translate(-50%, -50%) rotate(-23deg) ;
}

Upvotes: 1

Views: 23909

Answers (2)

Ting
Ting

Reputation: 41

if you want to change width only when browser's width are under X px, you can use 

.box {
    //your div's style
}

@media (max-width: X px){
    .box{
        //write here the new div's  % width and the max-width 

    }

}

Upvotes: 2

flx
flx

Reputation: 1578

you have to use width: xx% if you want the box-size to be "responsive". and to set a minimum or maximum width just use max-width: Xpx and min-width: Xpx

I've updated your fiddle accordingly.

http://jsfiddle.net/vekrhxu8/

Upvotes: 1

Related Questions