Trouble targeting classes on mobile
I'm trying to use this media query to add extra padding on the bottom for mobile.
@media (max-width: 769px) {
.two-col-section_grid .two-col-section_grid-desc.mobile {
padding-bottom: 0px;
}
}
Here's a codepen link to the html and desktop css
https://codepen.io/ezekielswanson/pen/qBQpaaY
(apologies, I don't have the pro version of for code pen so the image won't show but here's a screen shot of the page)
In live version it appears the media query isn't rendering at all. I'm confused as to why. Do I need to add the animation classes to target it specifically?
4 Replies
In the codepen, I don't see any media query?
Also, your selectors scare me a little 😆
Instead of this:
Could you not just have:
You've prefixed everything with
.two-col-section, so I don't see how there would be any conflicts with other things.I'm a bit star struck, it's the man himself! I appreciate you replying.
I added the media query to the code pen:
But it was this
@media (max-width: 769px) {
.two-col-section_grid .two-col-section_grid-desc {
padding-bottom: 80px;
}
}
I solved it for now. I added the 80px to desktop b/c it doesn't affect the desktop view. But for learning purposes was curious as to why that specifically wasn't working.
I need to clean up my class names 😅
To your Q about this
.two-col-section_grid-p { ... }
I could have it set to that.
I think I'm messing up my class names somewhere. I'll get digging. Thank you for your help! @Kevin
The media query is kicking in for me. It is a
max-width, so it's from 0 to 769px that it works.
The only other thing I can think of is you had it up higher in your code... but even then it should show up in your dev tools still 🤷It's strange. Even within the media query range the padding still doesn't apply or render in the dev tools. I'll keep in in the desktop version for now. But never seen something like this before.
