@media not accurately changing elements

Im very new to responsive design and I think I may of challenged myself above my skill set on this one (as its my first responsive site) however I have hit a brick wall with this one.

I have added a few @media queries to the css in order to change the layout based on the width of the browser. However I have noticed that the queries are not actioning when they hit the set width, instead they are being actioned roughtly 150px before this.

I have uploaded a test site for you to view over at this link

Could anyone advise?

Specifically which queries are you having a problem with?
The main one I notice is the 600px one, which seems accurate, the others must be more subtle as they did not stand out.

[OT] It seems to be working fairly well, bar a few issues.
One that stands out is the nav clashing with the “Welcome” on mobile.
That’s due to your line-height setting on the body 1.5em
It’s best to be unitless on line-height as that keeps it relative to the font size, so just line-height: 1.5; should do it.

Im testing on Safari with the file saved localy and it was thrown out however after testing on the server its working perfectly! Strange?!

Sam thanks I didnt know this but that fixed the error I was getting with the Welcome message .

Where I think I may of gone wrong is not laying it out mobile first, this my cause me extra work now defining the max I wish the layout to strech.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.