TWG

# February 21, 2013 at 11:08 am

I have been playing with a local responsive layout based on Foundation by Zurb. I’ve set quite a few @media only points in my CSS and when I check how the page is responding to the different points, a few of them are having issues.

I have points set at 320px, 480px, 600px, 800px, and 768px. I’ve set them with the following code:
@media only screen and (max-width: ___px){ }

I have my logo changing in all the break points but at 320 and 480 it only wants to read that change at 600px. Any help suggestions would be great.

Paulie_D

# February 21, 2013 at 11:09 am

Perhaps a link?

Paulie_D

# February 21, 2013 at 11:24 am

Yeah…Codepen for just bits relating to the Logo

Anonymous

# February 21, 2013 at 11:31 am

They should be in order starting from your widest media query (800px) on down.

In CSS any change made to an element below an already set value will overwrite whatever was initially set (with a few exceptions).

Therefore by putting them in order, whatever styles that are applied in your 320px query will overwrite what is in the 600px query because the 320px query is lower in the file.

Hugo Giraudel

# February 21, 2013 at 11:35 am

Depends on your strategy. Mobile first or desktop first.

Paulie_D

# February 21, 2013 at 11:52 am

Codepen is not much help without some HTML…:)

Paulie_D

# February 21, 2013 at 12:03 pm

>Depends on your strategy. Mobile first or desktop first.

Actually it doesn’t.

If there is a query that says JUST max-width 320px and another one **below it** with JUST max-width 800px the second will override any duplicated CSS.

Mobile first refers to your design strategy…not CSS cascades.

Or have I missed something?