I’ve been struggling with this for about a week now and need some outside help getting a media query to work for cellphone viewports. I’ve done this previously but cannot get it to work again on my latest project (https://nittanyleathernecks.com/leathernecks-new/)
I want the fixed background images to NOT display if the site is viewed on a small iPad or a cellphone… the style sheet’s @media screen and (min-width: 320px) and (max-width: 768px) code is not working preventing the vertical scroll’s 3 fixed background images from displaying on smaller viewports.
If anyone has the time (or inclination) to view my code and find where I mucked this up would be a tremendous help with keeping what little hair I have left.
In style.css, what happens if you move:
.one{…}
.two{…}
.three{…}
From: @media screen and (min-width: 0px) and (max-width: 375px)
To: @media screen and (min-width: 376px) and (max-width: 768px)
Hi @randyrie,
I’m really confused. Don’t know if you made changes to the site since you posted. Here are some general thoughts though.
Remember that CSS rules cascade, regardless or media rules. That means the rule that is loaded LAST wins. If you have multiple sheets, that means any rules on the last sheet loaded will win over ones loaded on previous sheets.
You have designed your page as “desktop-first”, which means that you have defined all the rules for your large views first on the style sheet. Any changes for smaller viewports should be at the bottom of the sheet in decreasing order. So the rules for @media screen and (min-width: 376px) and (max-width: 786px) should come before @media screen and (min-width: 0px) and (max-width: 375px).
Make sure the over-riding rules are completely within the outer media query curly braces.
I’m guessing you want to change the .fixed rule to display: none;.
Remember, you could also have a media rule of max-width: 768px that would cover from 0-768.
Hope this helps,
Bob
Again, thanks for your help @RobM… your brownies are in the oven.
I did eventually get it to work but it was by accident and not savvy. Your reply helps to explain why it now works … which I never would have thought of on my own.
