Responsive CSS Media Queries Behaving Very Strangley!

[davvam]

Hi

This is driving me nuts!

I have set up a responsive stylesheet to deal with the media queries for different mobile device sizes.

I thought I had it all good last night looking through - http://responsinator.com/

But I have had comments that the layout is not correct. And since re-visiting this is true.

If I just have one media query for example:

@media only screen and (max-width : 320px) {

And make changes to that I can see the differences, but if I start to add more media queries for example:

@media only screen and (max-width : 375px) {

The changes do not appear.

I think I might not be explaining myself correctly so here is an example of my site:

http://www.cre8tivesource.co.uk/test/index-TESTING.htm

For example on a mobile device for - iPhone 5 portrait · width: 320px

I need to move the links up, shown with a red border, but if I change anything else, nothing happens, unless I delete all the other media queries I have created for different sizes.

Really hope this makes sense, and would really appreciate some help!

Many Thanks

[OzRamos]

Hmm, I’m not seeing a red border have you fixed it? Also make sure you don’t have any missing semi-colons or other malformed CSS or whatever you add after may not show up.

Or maybe I’m misunderstand?

[davvam]

Hi

Thanks for the response, if you go here - http://www.responsinator.com/?url=http%3A%2F%2Fwww.cre8tivesource.co.uk%2Ftest%2Findex-TESTING.htm

I have added a red border just for iPhone 5 portrait · width: 320px viewing though - http://www.responsinator.com

Does the above help?

I cannot see any missing semi-colons in my responsive.css file, but again I am no expert!

Thanks again.

[ralphm]

The gap on the top is being caused by this (on line 116 or the responsive style sheet):

@media only screen and (max-width : 568px) {
	.menu ul {
    	margin: 100px 0 0 0;	
	}
}

Maybe override that or remove it?

[dsont]

Maybe you need to add a min-width

@media (min-width: 500px) and (max-width: 600px) {

}