Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Responsive Web Design Re: Responsive Web Design

#124352
Derek Wood
Participant

The viewport meta is the first part of the solution. But I would write it like this, so that the user can still zoom if they want:

For testing purposed, I would comment out all of the stuff that is not totally necessary. Then – I would remove the max-width from your queries. You just need the min-width in your case. That’s the magic of the C in Cascading Style Sheets. It’s like a top down trickle effect. You don’t need to put anything again as you go down the style sheet – unless you want to override it. For example: you only need font-size: 10px; in the body – once in the first media query. It will cascade down to everything beneath it. – and might as well start with 000px or 001px and not 320px – because then there will be no styles if for some reason it is smaller then 320px etc.

You have the right Idea – but I think you are making it more complicated then it is.

If you are writing anything twice – you are missing the point. As a side note, the general concensice is basically never use id’s # etc. I mean – it’s up to you – but if you are going to be doing web design – I suggest you just start using classes now – instead of switching over later when It starts to make sense.

This pen is a simple example: Good Luck!

-sheriffderek

http://codepen.io/sheriffderek/pen/JEthi