₦airaland Forum

Welcome, Guest: RegisterLoginWith GoogleTrendingRecentNew

Stats: 3,325,102 members, 8,420,341 topics. Date: Thursday, 04 June 2026 at 04:55 PM

Toggle theme

I Need Help With This Css Issue - Programming - Nairaland

Nairaland ForumScience/TechnologyProgrammingI Need Help With This Css Issue (543 Views)

1 Reply (Go Down)

I Need Help With This Css Issue by Davidcorny(op):
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 literally 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.
Re: I Need Help With This Css Issue by Nobody: 4:49pm On Feb 02, 2023
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.
Who insulted u in Stackoverflow?

U can try

@media screen and (min-width: 50em) {

.hide{
display:none;
}
Re: I Need Help With This Css Issue by Davidcorny(op): 4:53pm On Feb 02, 2023
GREATIGBOMAN:
Who insulted u in Stackoverflow?
It really doesn't matter, I'll prefer to have answers even if I'm insulted so I understand than no answers at all.
Re: I Need Help With This Css Issue by Nobody: 4:54pm On Feb 02, 2023
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.
Check the previous post

Also it's better u post screenshots of your code.
Re: I Need Help With This Css Issue by Davidcorny(op): 5:08pm On Feb 02, 2023
GREATIGBOMAN:
Check the previous post

Also it's better u post screenshots of your code.
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.

Re: I Need Help With This Css Issue by Nobody: 5:10pm On Feb 02, 2023
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.
Re: I Need Help With This Css Issue by Nobody: 5:30pm On Feb 02, 2023
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.
what element are u trying to hide in this image and what screen size are u trying to hide it
Re: I Need Help With This Css Issue by Davidcorny(op): 5:44pm On Feb 02, 2023
GREATIGBOMAN:
what element are u trying to hide in this image and what screen size are u trying to hide it
I'm trying to switch the image nested in the picture tag between desktop and mobile as the screen increases above 800px or 50em.
Re: I Need Help With This Css Issue by Davidcorny(op): 8:57pm On Feb 02, 2023
Fixed : Nested SCSS creates a high specificity that invalidates media queries.
1 Reply

Please Help With This Css.I Seriously Want To Learn CSS, HTML, Python And JavascriptCSS Cheat Sheet 1 & 2234

If You Are Looking For How To Japa As A Developer, This Information Is For You!Nodejs Or Rust Programmer Urgently NeededLearning Programming