Davidcorny:
Hey guys, I was building a project from frontend mentor and this required using a media query for the desktop layout(built it mobile-first), the problem i have is that it has refused to change or respond to a media query of:

@media (min-width: 50em) {}

I mean literially nothing changed, the only clue i have from trying to debug this is that the media query responded a bit when i changed the main css with(article.card-body) to have a property of min-width.

This is an example of the code https://codepen.io/david4bay/pen/MWBzdyQ

I am using SASS(scss syntax).

I've tried stackoverflow but all i got was insults and no answers.

GREATIGBOMAN:


Who insulted u in Stackoverflow?

Davidcorny:


It really doesn't matter, I'll prefer to have answers even if I'm insulted so I understand than no answers at all.

GREATIGBOMAN:


Check the previous post

Also it's better u post screenshots of your code.

Davidcorny:


The CSS is too long to wrap in my snipping tool but here's the html, you can see I'm using a picture element to substitute images with a width above 800px, this however does not work. I may just cancel everything and use a background-image property instead, then hide the mobile image if I can't find a solution.

Davidcorny:


The CSS is too long to wrap in my snipping tool but here's the html, you can see I'm using a picture element to substitute images with a width above 800px, this however does not work. I may just cancel everything and use a background-image property instead, then hide the mobile image if I can't find a solution.

GREATIGBOMAN:


what element are u trying to hide in this image and what screen size are u trying to hide it