Making responsive website,
I wrote this, it doesn't work.
#media (max-width: 767px) {
#nav { display:block; }
}
but, I wrote this, it works!
#media (max-width: 767px) {
#nav { display:block !important; }
}
Why? :(
Check your css code , something with higher specificity is changing your #nav element.
This is a little concept:
!important after the style attribute gives high priority to that style. That is why your css is working then.
!important override the existing stylesheet attribute defined in same context.
!important will override any inline style, or more specific style that may be taking precedence on your page.
For example, you can override the style on this element...
<div style='background-color:white'></div>
by adding this in your stylesheet...
div { background-color: black !important }
But!, if you add !important to the inline style, it will then take precedence, for example...
<div style='background-color:white !important'></div>
here is a good stackoverflow answer explaining the concept in a bit more detail.
Related
I want to alter the css in a Wordpress theme. I am adding the following custom css in style.css in Wordpress. However, the style I add does not show up on the website. I am overwriting:
#media screen and (max-width: 830px)
.masthead .top-bar, .masthead .hide-on-mobile {
display: none !important;
}
to
#media screen and (max-width: 830px)
.masthead .top-bar, .masthead .hide-on-mobile {
display: inline !important;
}
Right now the first !important is overriding your second I suppose. But you can override !important statements quite simple
Taken from: How to override !important?
Give the selector a higher specificity (adding an additional tag, id or class to the selector), or add a CSS rule with the same selector at a later point than the existing one (in a tie, the last one defined wins).
Some examples with a higher specificity:
table td {height: 50px !important;}
.myTable td {height: 50px !important;}
#myTable td {height: 50px !important;}
Or add the same selector after the existing one:
td {height: 50px !important;}
Disclaimer:
It's almost never a good idea to use !important. This is bad engineering by the creators of the WordPress template. In viral fashion, it forces users of the template to add their own !important modifiers to override it, and it limits the options for overriding it via JavaScript.
But, it's useful to know how to override it, if you sometimes have to.
Sometimes when I declare a value for something, and later I want to override it with different value it doesn't work.
For example (sass styling):
.wrapper-breadcrumbs {
h1.breadcrumb-title {
font-size: 46px;
}
}
And just below I put this...
#media (max-width: 768px) {
h1.breadcrumb-title {
font-size: 32px;
}
}
... it won't work, and I see in Chrome element inspection that the first one actually overrode the second value, even though the second statement is below first.
But if I repeat parent class names like this...
#media (max-width: 768px) {
.wrapper-breadcrumbs h1.breadcrumb-title {
font-size: 32px;
}
}
Then it works! For me it seems strange... is there any rule for this? Am I missing something? Why do I have to write parent class name?
It's because the first rule has higher specificity (2 classes and 1 element) vs 1 class and 1 element for the second rule.
The second rule needs to have same or higher specificity to override the first one. I recommend to take a look at Specifics on Specificity article on CSS tricks for more details.
As mentioned in the comments, you can also put !important after the font-size in the second rule, however that is typically a very bad practice and you should modify your CSS rule to have higher specificity instead, which is cleaner and will help you avoid headaches when debugging your CSS :)
It is due to first selector has higher precedent than second selector. Like Id selector has higher precedent than class selector. So if you apply any style using id selector and later own try to override it with class selector than it won't work.
.wrapper-breadcrumbs {
h1.breadcrumb-title {
font-size: 46px;
}
}
In this case you have two class and one attribute selector so its precedent is following.
precedent = (inline, id, class, element/ pseudo)
precedent = (0,0,2,1) //Left element has more precedent than right element.
#media (max-width: 768px) {
h1.breadcrumb-title {
font-size: 32px;
}
}
precedent = (0,0,1,1)
You can clearly see that first has more precedence than second selector so it will never work.
#media (max-width: 768px) {
.wrapper-breadcrumbs h1.breadcrumb-title {
font-size: 32px;
}
}
precedent = (0,0,2,1)
In this case it has same precedence as first element so it will overwrite the previous style and will work on this data.
You can use following link to calculate precedence of CSS selectors.
http://specificity.keegan.st/
Always try to overcome this problem by managing of the precedence of the selector instead of placing !important with CSS styling as it will override default precedence of selectors and in case of huge CSS make it difficult to debug it.
Please explain me how the following responsive media query works.
#media not screen,screen and(max-width:400px)
{
nav,ad{
display:none;
}
a{
text-decoration:none;
color:inherit;
}
}
not screen means it will apply to media types that arent screens (Print etc.)
screen and(max-width:400px) means it will apply to all media types using a screen where window width is 400px or lower.
There seems to be a problem with the CSS as the "ad" tag does not exist. Are you sure its not
nav.ad {
Please check and correct that error first.
nav.ad{
display:none;
}
The above CSS will hide the element with the class="ad" when the display screen width is 1px to 400px
and
a{
text-decoration:none;
color:inherit;
}
The above CSS will inherit the URL/href font-color from the parent ID/tag
Hope this helps.
I have this in my print CSS:
.foo
{
display: none;
}
.bar
{
display: none;
}
All class="foo" elements are hidden, but all class="bar" elements are still visible. What could be the cause of this?
CSS specificity could be overruling your print CSS rules. The simplest way to resolve this is to add !important to your rules. While generally this should be avoided, it's fine to use it in a print CSS.
.bar
{
display: none !important;
}
The other way is to make sure your print CSS rules come out on top in the specificity calculation. The exact way to do this depends entirely on your regular CSS rules.
I'm trying to hide my menu by default in screens less than 760px wide. For some reason though, my display:none rule is not taking effect. It's being overridden by a previous rule, as follows:
media="all"
#mainmenu {
display:inline-block;
}
#media screen and (max-width: 760px)
.btncontent {
display:none;
}
It's also worth noting that I have a button that jQuery reveals the menu by adding an inline style. The above code is before the button is pressed though, with no inline styles.
I'm sure I'm missing something really simple here but not sure what. Thanks in advance.
EDIT: I've solved this issue by adding the ID selector to the Media Query but I'm going to leave this question open as I don't really understand why it worked.
Are #mainmenu and .btncontent the same element? If so, then the reason is simply because the ID selector is more specific than the class selector.
#media rules do not influence rule precedence in any way; they are transparent to the cascade, so style resolution takes place as if the enclosing #media rule wasn't there. In your example, when the media query is fulfilled, browsers see this, which makes it clear that the rule with the ID should take precedence:
#mainmenu {
display:inline-block;
}
.btncontent {
display:none;
}
Depending on how you added the ID selector to the second rule, you either balance or tip the specificity, allowing it to override as expected:
/* More specific */
#mainmenu.btncontent {
display:none;
}
/* Equally specific */
#mainmenu, .btncontent {
display:none;
}
Because the id is important.
Right way:
media="all"
#mainmenu {
display:inline-block;
}
#media screen and (max-width: 760px)
#mainmenu {
display:none;
}