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;
}
Related
Could someone just give a run down? Like if you had buttons and images, and a footer or something? Does it all go into one Media Query or is it separated? I'm very confused.
Just as #Berdesdan said, Media queries set up specific styling so that your website can relate to screen sizes, etc.
For me, it depends on how long the classes in each section of my Style Sheet is. I usually have lots of classes for my header, footer and other section of my site. So I just add a Media Query under each section of my CSS. For instant;
/* Header Styles */
.header { width:100%; }
.header ul { }
.header ul li { }
.header ul li a {}
#media (min-width:768px){
.header { width:80%; }
}
/* Footer Styles */
.footer { width:100%; }
.footer ul { }
.footer ul li { }
.footer ul li a {}
#media (min-width:768px){
.footer { width:80%; }
}
In this way, I can edit each section and their media query together, one after another. Basically, you can have as many media queries in your CSS file as you want. No limit.
I hope this explains. Try checking out resources in the w3schools.com link and other resources on Media Queries.
Media queries set up specific css rules at certain 'flags'.
They can be related to the screen, to set up specific css rules when some-one prints a document, or for screenreaders.
Read more on the following links.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
https://www.w3schools.com/css/css3_mediaqueries.asp
https://codepen.io/everybodysfeelingwonderland/full/OjyRpM/
Somehow I can't change the color of my Nav links for a smaller screen size in my media query. It should turn white, but it just stays gray as for the bigger screens.
#media all and (max-width: 580px) {
nav li a,
nav ul li {
color: white;
text-align: right;
display: block;
}
}
nav li a {
text-decoration: none;
color: #666666;
font-size: 20px;
}
Media queries do not add specificity to a selector. They just control if the code inside is ignored or not.
Which means that...
#media (condition) {
a selector {
some value
}
}
a selector {
another value
}
...will always apply "another value", because it's placed later and has same specificity. You need to invert them and they will work as intended:
a selector {
another value
}
#media (condition) {
a selector {
some value
}
}
The media queries should be in the lowest section of the CSS.
If I first define the media queries; and define regular CSS below, the lower matches override the once defined before.
It's quite common to put media queries to the bottom part of the CSS.
Your media query rule should be after/below the regular rule. In your current code, the media query rule for nav li a is at line 104, the general rule is at line 162, i.e. after the media query rule - so it's overwriting the previous rule.
Just move your media queries to the bottom (or at leat below the according general rules if you wirte them one by one), this will fix your problem.
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.
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.