Hi all! I’m altering the CSS of my theme to try and make the width fill newer larger phones, so in the media queries I simply want to tweak the `min-width` and `max-width` values really.
I’m having a problem though, that no matter what I enter into the additional CSS, it seems to be ignored by WordPress. I don’t think it’s theme-related, because when I search for the `main-wrap` area that I’m trying to override in source on mobile, it has my CSS in and no other.
Default CSS:
@media only screen and (min-width: 480px) and (max-width: 767px)
#main-wrap {
width: 440px;
}
My CSS override:
@media only screen and (min-width: 480px) and (max-width: 1000px)
#main-wrap
{
width: 100%;
}
Things I’ve tried:
1. Wrapping the `#main-wrap` in extra brackets `{}`
2. Adding `div` before the `#main-wrap`
3. Making the `min-width` 0 and the `max-width` 10000
4. Adding `!important` in various places
So now I’m reaching out for help.
The weird thing with this is: in the preview in WordPress, when I first open it, it defaults to the 440px on the tablet view, but if I retype the `#` before `main-wrap` or do some other trivial adjustment, it fixes the problem in the preview pane, and that stays “fixed” while I tinker with the CSS. But then when I come out and go back in (or if I view the site on my phone or tablet), it’s back to the default 440px.
Any help would be appreciated! My website is [here]) if you need to look at the source.
Thanks in advance!
[ad_2]
~~This is just a normal~~ [~~specificity~~]) ~~problem – the order of rules is important (i.e. the C in “CSS”), as is the amount of “power” that your rule has. You can add more specificity by adding more nodes/ID/classes in your rule e.g. body div#main-wrap { width:100%; }~~
edit: just checked your site – the reason your rule isn’t working is because you don’t have the required braces on the `@media` rule i.e.
@media … {
div#main { … }
}
CSS overwirtes work by selecting the most specific selector. So If you have only the #main-wrap ID more specific than just #main-wrap is body > #main-wrap.
Instead of figuring out the selector path do the following.
1. Right click the website and choose inspect
2. Right click on the #main-wrap ID and go to the Copy menu and choose “Copy Selector”.
3. Paste this in your media query and it will overwrite the stylesheet.