7

How would I make this css into a responsive website? I figured I have to use.

   @media (min-width: 700px) and (max-width: 1150px) {

    #div{position:absolute;left:149px;top:61px;}

    #div2{position:absolute;left:249px;top:81px;}
   #div2{position:absolute;left:249px;top:81px;}
   #div3{position:absolute;left:279px;top:181px;}
   #div4{position:absolute;left:449px;top:121px;}
    } 

But there are a lot of divs any fast way to do this? Editing like 45 of these divs will take forever. Im really new to this, any help will be appreciated.

1
  • 2
    You shouldn't be absolutely positioning that many DIVs anyway. CSS is designed to allow you to float/position elements naturally and then using media queries, adjust their size/float/position or hide them entirely. Commented Feb 1, 2014 at 15:55

1 Answer 1

13

To make it responsive, you must not use px-values. Always use %-values instead.

You can use tools like this one http://rqrwd.com/ to calculate px into %-values.

Nevertheless, I don't understand why you need so much absolute-positioning. In responsive-desgin, the container should 'float' - Absolute positioning (even with %-values) makes that impossible.

but there are alot of divs any fast way to do this?

You don't have to write the design for each div. Furthermore, I think your syntax #div is not ideal - div2 and div3 have the exact same layout - use a class instead!

To apply css-styles to all divs:

div {
   width: 40%
}

To apply a syntax to only one container:

HTML: <div id='unique'>content</div>

#unique {
   width: 40%
}

To apply a syntax to several containers (but not all):

HTML: <div class='flat'>content</div><div class='flat'>content</div>

.flat {
   width: 40%
}

or

#div2, #div3, .flat {
   width: 40%
}

You should probably take a look at this short css-introduction: http://www.cssbasics.com/introduction-to-css/

Sign up to request clarification or add additional context in comments.

3 Comments

If you designed your css correct, and always used %-values, you avoid defining dozens of media-queries. In good designs they are neccessary, yes, but a basic layout, which looks good on nearly every device is also possible without them.
+1 for "I don't understand why you need so much absolute-positioning in responsive design." Responsive design begins with flexible grids, flexible images and media queries.
Good answer. Side thought: rqrwd.com So there is an entirely dedicated website for a simple percentage calculation? :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.