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.
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.
We were Desktop first then mobile but looking at the recent analytics for our current site, we have noticed that 80% of our views are from a mobile device.
Well after reordering my CSS with the largest screen size first and the smallest last, it's apply the correct layouts on my mobile devices I'm testing it on.
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.
Perhaps a link?
It's on a localhost setup right now.
Is there a certain order that you are suppose to put your break points for responsive design?
Depends a little bit on how you're setting them up. Could you share some of the code with us?
Yeah...Codepen for just bits relating to the Logo
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.
Depends on your strategy. Mobile first or desktop first.
We were Desktop first then mobile but looking at the recent analytics for our current site, we have noticed that 80% of our views are from a mobile device.
Codepen is not much help without some HTML...:)
I started typing it and then I saw @TheDark12 's comment and it solved my issue. It's reading correctly now.
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?
Well after reordering my CSS with the largest screen size first and the smallest last, it's apply the correct layouts on my mobile devices I'm testing it on.