Responsive Web Design

[rafaelocean]

So I’ve been learning about responsive web design in class in college. So, the majority of my site is working however two of media queries are failing. But, more importantly everything was perfect beforehand, but the layout would never change on my iphone? All though it would work on my browser on my desktop.

I’m confused haha. Thanks!
My website is here: [http://rafaelrodrigu.es](http://rafaelrodrigu.es “”)

Check out this Pen!

[chrisburton]

@rafaelocean Try putting the following in your head section

[rafaelocean]

chris thanks that’s working. now i’m trying to figure out why my first media query won’t work.
the background color has remained white.

@media all and (min-width: 320px) and (max-width: 659px) {



body {background-color: #2E1702;

font-family: 'museo-sans', sans-serif;

font-size:10px;

}



#site {

margin: 0 auto;

padding-top:10px;

padding-bottom:15px;

max-width:440px;

width:90%;}



#title { font-family: 'modesto-text', serif; font-size: 3.14em;}

#menu {font-size:1.3em; line-height:2em; padding-top:5px;}

h2.page-title {font-size:1.7em;}





}







@media all and (min-width: 660px) and (max-width: 879px) {



body {

background-color: #2E1702;

color: white;

font-family: 'museo-sans', sans-serif;

font-size:10px;

}



#site {

margin: 0 auto;

padding-top:10px;

padding-bottom:15px;

max-width:660px;



}



#title { font-family: 'modesto-text', serif; font-size: 4.8em;}

#menu {font-size:2em; line-height:2em; padding-top:5px;}

h2.page-title {font-size:1.7em;}



}









@media all and (min-width: 880px) {

body {

background-color: #2E1702;

color: white;

font-family: 'museo-sans', sans-serif;

font-size: 10px;

}



#site {

margin: auto;

max-width:880px;

padding-top:15px;

padding-bottom:15px;

}



#title { font-family: 'modesto-text', serif; font-size: 6.5em;}

#menu {font-size:25px; line-height:2em;}

h2.page-title {font-size:20px;}



.thumbnail {width:220px;}



p { font-size:1.2em; line-height:1.6em;}







}



Check out this Pen!

[chrisburton]

I’m a little confused on what you’re trying to accomplish here. Are you trying to create a media query only layout?

[rafaelocean]

I was trying to create a site with multiple break points like here on css-tricks or mashable.com etc.. Maybe I should of used multiple style sheets instead of one? So it would be dynamic.

[chrisburton]

I don’t see the same effect happening on your site so maybe it’s a Code Pen issue? This isn’t my area of expertise really. And I don’t see why you would need multiple stylesheets.

[Derek Wood]

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

[Derek Wood]

[rafaelocean]

thanks derek!

[Author]

Posts