Cancelling out @media in Wordpress template
Hi!
So this is a real nut for me ....
I've been asked by my employer to build a schedule and add it to an existing wordpress template. I tried to use WP plugins, but nothing gave me the horisontal scroll I desired.
So I made this template for each day:
https://github.com/AMarlonG/Ice-Hot-kode
Now comes the crux.
I've build this with the responsive code line
width: min(120ch, 100% - 4rem);, which is my preferred option.
But this WP template has many different @media breakpoints which is overriding this.
I think it is .main > .containerwhich has all the @media queries (there is another .container for the header and nav tag. I don't wanna change their width).
This is the Wordpress page I want to zero out the media queries. The HTML was added using an html block in the WP CMS.
https://www.icehotnordicdance.com/thursday-15th-schedule/
I've tried selecting each of the break points and adding both 0 or the width: min(120ch, 100% - 4rem);, but I'm not getting it to work.10 Replies
give the container an id so the specificity is higher, then you can unset the max-width, and use your width
So I understand what I need to do, but looking around the WP CMS I'm not able to find the html editor for the entire page, just my content ...
Ah okay, if you don't have access to the container div you can try to target it with the has selector
Yes @MarkBoots It fucking worked! 🎉
That's so cool! And caniuse says :has is so good now that I will let those who has older browsers just deal with the other one. It doesn't break, just isn't as nice.
even if not, it will just fall back to what is was in the media queries, so it won't break too much
Well, you know the drill! Today's 🦚 is yours.
Thanx a lot! 🙏🏾
np