I have a problem with using my styles in a certain class with my style.css.
The class structure is shown below. What i tried so far to make changes is:
#media (max-width:920px)
{
#section {padding-left:20px !important}
}
#media (max-width:920px)
{
#block-system-main {padding-left:20px !important}
}
#media (max-width:920px)
{
.block-system-main {padding-left:20px !important}
}
#media (max-width:920px)
{
.block .block-system .clearfix {padding-left:20px !important}
}
Class structure looks like that:
<section id="block-system-main" class="block block-system clearfix">
<div id="node-493" class="node node-meeting node-promoted node-teaser clearfix"
When I right clicked and examined the element I found a spot in the css code, where certain styles where automatically applied to this class. It looked like that:
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
display: block;
}
The "section" was accentuated blue here, so i guess this was the class which was important in this case. If i wrote padding-left:20px; in that part of the code, everything worked fine, but i do not understand why my solution does not work...
No need to write each and every time media queries for same resolution. You can combine everything into only one. Also there is no id called "section" and class called "block-system-main".
#media all and (max-width: 920px)
{
section.block-system{padding-left:20px !important}
}
Just add the above one line instead of your entire code.
CSS :
#media (max-width:920px)
{
section {padding-left:20px !important}
}
#media (max-width:920px)
{
#block-system-main {padding-left:20px !important}
}
#media (max-width:920px)
{
.block-system-main {padding-left:20px !important}
}
#media (max-width:920px)
{
.block .block-system .clearfix {padding-left:20px !important}
}
section is a tag so don't use #section . I think this should work.
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
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;
}
}
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;
}
I have a CSS like below,
#media screen {
.page{}
}
#media print {
.page {}
}
body
{
background-color:#ffffe0;
margin-left:20px;
margin-top:50px;
margin-bottom:50px;
}
select
{
font-size : 24pt; font-family: 'MS UI Gothic' ;
}
I want to use the same CSS but only the values inside the body should be changed. The values are
body
{
background-color:#ffffe0;
margin-left:5px;
margin-top:0px;
margin-bottom:0px;
}
I tried adding a new class like this. Is this right ? Or how we can use two different body for different classes. Please anybody tell me.
I tried like this
#media screen {
.page{}
}
#media print {
.page {}
}
body
{
background-color:#ffffe0;
margin-left:20px;
margin-top:50px;
margin-bottom:50px;
}
select
{
font-size : 24pt; font-family: 'MS UI Gothic' ;
}
#media screen2 {
.page2{}
}
#media print2 {
.page2 {}
}
body
{
background-color:#ffffe0;
margin-left:20px;
margin-top:50px;
margin-bottom:50px;
}
select
{
font-size : 24pt; font-family: 'MS UI Gothic' ;
}
But every time it is taking only the first body only.
As far as the body selectors, they both apply to the same element, so only one can be used. If you want to change the style of body, change the existing selector's properties. If you want to switch between the two based on some logic, give the <body> element an ID or class and add that to the selectors so you can choose which one will apply.
ALso, screen2 and print2 aren't valid media selectors.
Ok, here is the first bit.
As #Adrian said, you can only have one body element for a page.
Secondly, #media and #print corresponds to normal screens (such as desktop, laptop, and such) and prints (for examples, when you click on the print button) respectively.
So, what you need to do is simple. Either put the body tag outside all the other media queries.
body {
background-color:#ffffe0;
margin-left:20px;
margin-top:50px;
margin-bottom:50px;
}
#media screen {
.page{}
rest of your styles and classes...
}
#media print {
body {
background-color:#ffffe0;
margin-left:5px;
margin-top:0px;
margin-bottom:0px;
}
.page {}
rest of your styles and classes...
}
and so on...
or
do this...
#media screen {
body {
background-color:#ffffe0;
margin-left:20px;
margin-top:50px;
margin-bottom:50px;
}
.page{}
}
#media print {
body {
background-color:#ffffe0;
margin-left:5px;
margin-top:0px;
margin-bottom:0px;
}
.page {}
}
However, you should note that the print type css will only visible while you take a print out. It will not be visible on the main site display.
I'm having an issue with a CSS media query where the general style is being applied after the media query despite being above the media query in the cascade.
Example:
HTML:
<div id="myblock1">
<div>Block 1</div>
<div id="myblock2">Block 2</div>
<div>Block 3</div>
</div>
CSS:
#myblock1 div {
display:block;
background-color:#F00;
}
#media (min-width:600px) {
#myblock2 {
display:none;
}
}
Live demo: jsFiddle
In theory, all 3 blocks should be visible in windows of 600px width or less, and when larger the middle block should disappear, but that is not the case. Any ideas on why the ID/media query is being applied before the general styling?
That's because #myblock1 div is more specific than #myblock2 (1 ID + 1 element vs 1 ID).
You'll either need to be more specific, or add !important on the rule you're trying to override.
Be more specific: #myblock1 #myblock2 { display: none; }
Use !important: #myblock2 { display: none !important; }
In my opinion, the best solution would be to make the outer container less specific, by giving it a class name, rather than an ID:
<div class="myblock1">
<div>Block 1</div>
<div id="myblock2">Block 2</div>
<div>Block 3</div>
</div>
Then, the following will work fine:
.myblock1 div {
display:block;
background-color:#F00;
}
#media (min-width:600px) {
#myblock2 {
display:none;
}
}
The specificity of your selector isn't high enough, so it isn't overriding your previous rule. Try this one instead:
#media (min-width:600px) {
#myblock1 #myblock2 {
display: none;
}
}
Demo: http://jsfiddle.net/7aWpQ/2/
Add !important to display:none; than it's working.
#myblock1 div {
display:block;
background-color:#F00;
}
#media (min-width:600px) {
#myblock2 {
display:none!important;
}
}
Note: Because the media query is less specific than your main css. ie. #myblock1 #myblock2 { display:none; } should also work