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.
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
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.
I use jQuery to animate my page - a function called slideToggle(). I can view this in the debugger and see the styles applied to my <nav> element.
The problem I'm facing, is that after I call slideToggle ( a second time ) it sets display:none to <nav> as it correctly should.
However, If I expand the screen again, the menu does not re-appear in its normal state as it should.
I set it in the media query but it is ignored.
#media screen and (max-width: 1000px){
/* This does nothing but I want it to turn the display on.
*/
nav {
display: block;
}
}
To answer the question can I override inline-css? ... Yes, by using !important.
Your real question:
By adding !important to your media query when the screen is big again. see following snippet (run in full screen and make screen smaller/bigger)
(function(){
$('button').on('click', function(e){
$('#test').slideToggle();
});
})();
#media screen and (min-width: 1000px) {
ul {
height:50px;
background-color: red;
width: 100%;
}
li {
display: inline-block;
height: 50px;
line-height: 50px;
float:left;
margin-left: 50px;
}
#test {
display: block !important;
}
button {
display: none !important;
}
}
#media screen and (max-width: 1000px) {
ul {
background-color: red;
width: 100%;
}
li {
display: block;
height: 50px;
line-height: 50px;
}
#test {
display: none;
}
button {
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
<ul>
<li>This</li>
<li>Is</li>
<li>a</li>
<li>menu</li>
</ul>
</div>
<button >Toggle menu</button>
Media queries are irrelevant here. They don't affect the cascade at all.
Inline rules always trump rule-set rules unless the rule-set rule is !important and the inline rule is not.
In general, the most specific CSS selector will be applied to an element. The cascading order is defined as follows (highlight by me):
Find all declarations that apply to the element and property in question, for the target media type. Declarations apply if the
associated selector matches the element in question and the target
medium matches the media list on all #media rules containing the
declaration and on all links on the path through which the style sheet
was reached.
Sort according to importance (normal or important) and origin (author, user, or user agent). In ascending order of precedence:
user agent declarations
user normal declarations
author normal declarations
author important declarations
user important declarations
Sort rules with the same importance and origin by specificity of selector: more specific selectors will override more general ones.
Pseudo-elements and pseudo-classes are counted as normal elements and
classes, respectively.
Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins.
Declarations in imported style sheets are considered to be before any
declarations in the style sheet itself.
Furthermore, you can forcefully apply a style using the !important keyword. You should not use the declaration, however, unless it is absolutely necessary after all other avenues have been exhausted. I recommend reading this article if you want to learn more about the !important keyword, when to use it and why to avoid it.
You can add a class in the media query and call addClass in your function.
By the way
You set display: block; for nav when max-width: 1000px
It should be MIN-width if you want to display the nav when the screen widens.
this will work 100%;
#media screen and (min-width: 1001px){
/* This does nothing but I want it to turn the display on.
*/
nav {
display: static !important;
}
}
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'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;
}