Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS troubleshooting basic @media queries Reply To: troubleshooting basic @media queries

#241159
drone4four
Participant

Check out my latest pen: https://codepen.io/Angeles4four/pen/ZWmeMK

I’m now trying to get the green coffee mug to appear as superscript to the left of the heading on an angle at larger resolutions, like at 900px or greater while having this same green mug disappear at a narrower resolutions. When the green mug disappears at narrower resolutions, in its place I’m trying to get the yellow coffee mug image to appear on an angle above the heading element.

That is what I have set out to do.

But the yellow mug as of right now appears at narrower resolution and disappears at a larger one, which is great. But the green superscript coffee mug only appears at resolutions less than 768px even though I explicitly indicate in the CSS for the display property to be none for the min-width: 768px. I also explicitly don’t use a display:none declaration for the superscript element at 900px and greater.

I’ve been playing with @media queries without success. Could someone here enlighten me?

I found Coyier’s guides to Media Queries for Standard Devices and his other guide for Logic in Media Queries which are interesting but which don’t really address the issue I’m having.

Thanks, ppl.