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.
Related
I have :before and :after pseudo elements. I have these to change when the media rule has a screen width max-width:760px.
When the max width is 760 or > I should see a different graphic but the same :before and :after text content.
I see the new graphic but not the :before and after elements displaying.
I have tried adding the :before and after pseudo elements in the css under #media all and (max-width:760px) but without any success.
Does anyone have any idea why this is not displaying?
CSS
#infoGraph::before {width:100%; content:"Did you know..."; line-height:3rem; font-weight:bold; font-variant-caps:all-small-caps; font-size:1.4rem; margin-top:1.5rem;}
#infoGraph::after {width:100%;content:"Full text here..."; font-style:italic; font-size: 0.8rem}
#infoGraph {width:100%}
#infoGraph img {width:100%}
#media all and (max-width:760px){
#infoGraph{content: url('/site_images/new-graphic.png');}
}
Youare missing the brackets around the media rule:
#media all and (max-width:760px) {
#infoGraph{content: url('/site_images/new-graphic.png');}
}
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.
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.
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;
}