Media Query problems - html

Ok, I have encountered a problem while experimenting with media queries. I'm wondering if any of you could possibly help me on this issue. The purpose of this code is simple. When the screen size is above 600px the banner should not be visible and when the screen size is below 600px the banner should appear.
#media (max-width: 600px) {
.banner {
display: none;
}
}
<header class="banner">
<h1>Banner</h1>
<p>Banner Content</p>
</header>
Now as you run the code above(I assume you just did) there is nothing wrong.
Ok, now I will add similar code.
#media (max-width: 600px) {
.banner {
display: none;
}
}
.banner {
display: block;
}
<header class="banner">
<h1>Banner</h1>
<p>Banner Content</p>
</header>
Outside of the query is a style that contradicts the style given in the media query. Now what I believe to know about media queries. The styles within the query should override any other existing styles just as long as the screen-size condition is met.
If this is normal, what would be the best way of having the style within the media query override the other existing styles outside the query.

(Assuming all else is equal) Styles are activated in the order of precedence that they're encountered, unless encased in what amounts to an IF query, such as a media query.
.banner {
display: block;
}
So the above CSS will always display, no matter what other IF statements come before the rule itself. Which is not what you want.
Solutions:
1) You instead need it to be encapsulated within its own media query to only show when ABOVE 600px so:
#media (min-width: 601px) {
.banner {
display: block;
}
}
2) You place all your media queries in reverse order, so all at the bottom of (last in) your CSS file(s), so the media qualifiers are read AFTER the standard rules.
EDIT:
As Sean qualifies in comments, there are various more specific CSS selections, rather than just the order of appearance in the file, that can bend which rules take precedent over others. The order of appearance works in this case and works when the subject rules are all equal (such as all direct classes only) but please note that there will be other CSS rule instances that can complicate the issue. This answer is not intended for more complex CSS rule ordering.

It depends on the order of the rules: Every rule that comes AFTER a rule in a media query (for the same class or ID) will override it.
In your case the "general" rule for .banner is below/after the media query, so it overrides the rule in the media query. You have to write the general rules first, followed by the media queries.

Related

Bulma, how to change default media queries for classes throughout entire site

For example, any is-4, is-7 etc. classes on columns only applies to the following rule by default. Using is-7 for instance..
#media screen and (min-width: 769px), print
.column.is-7, .column.is-7-tablet {
flex: none;
width: 58.33333%;
}
is-7 is an example, this also applies to is-2,is-3 and so forth
What i want to do is simply change min-width:769px to min-width:992px throughout every deafult rule
i tried to change the default $tablet variable to $992px BEFORE bulma is imported would work but this has not. $tablet is originally $769px so i thought this was the variable used to determine the min-width for those media queries
Does anyone know please?

Correct usage of media queries

Can someone demonstrate the correct usage of media queries, please? I've got quite a lot of responsive code - i.e. a simplified version below. I would like the second media query to inherit the attributes of the the previous ones too, if that makes sense? i.e. p should have a font-size 30px and text-align center when in min-width 201px. At the moment I'm having to duplicate the code, which in this case is fine but with a big code-base it's pretty horrific and 99% redundancy. i.e.
media query 1 - p{font-color:blue;}
media query 2 - p{font-color:blue; font-size:5px;}
media query 3 - p{font-color:blue; font-size:5px; text-align center;}
I would like to have it so in media query 3 I can just do p{text-align: center;} with the rest inherited.
#media query screen and (min-width:100px) and (max-width:200px)
{
p{font-size:30px;}
}
#media query screen and (min-width:201px) and (max-width:300px)
{
p{text-align:center;}
}
If you want rules from the earlier media queries to apply, then write them so they don't explicitly exclude the later ones.
i.e. remove the max-width rules.

Why is my media query rule not being prioritized?

I'm using media queries to make my site resposnive. In my CSS doc, the media queries are below all other styles. I'm am using diplay: none; which works perfectly but on another div the original width is taking priority even when I reduce the browser size.
Image of dev console:
Do I really have to add !important to every media rule?
CSS:
#media screen and (max-width: 930px) {
/* INDEX */
nav ul {
display: none;
}
#sliderContainer {
width: 80%;
height: auto;
}
}
The rule at line #112 in index.css is also applied by #sliderContainer and not by nav li, as you state in your question (it can be seen in the image you posted). Because it is met later and has same specificity, it applies.
If you place !important on a rule, you'll probably need to use !important when trying to override it, and before you know it, half your rules will be !important and fixing responsiveness is going to be a nightmare. Either slightly increase specificity of your rule or change their order.
Very important note: #media queries do not add any specificity to CSS rules. They just make them apply (when conditions are true) or not (when not true).
Useful note: A very good technique to always keep specificity of your selectors as low as possible is to place your custom stylesheets last inside <head>, after any theme/libraries/plugins stylesheets. Whenever you need to override anything, you just copy-paste the selector from where it is currently defined, and only placing it in your custom stylesheet will make it have priority without higher specificity.
Adding !important tags to your media queries may be necessary, should you need to override styles provided by a pre-set template or development platform. For example I work with Squarespace, and have to override their default styles from time to time in this way - however, as with myself, I can understand your aversion towards doing so.
I know I'm not supposed to "ask for clarification" here, but my lack of rep prevents me from simply making a comment: are you working on a web develop platform similar to Squarespace, Weebly, etc., and does applying the !important tag in fact achieve the desired result?
Best,
Tyler

Should the order of CSS files in a HTML page matter?

I have a basic HTML page and three CSS files on each. The first CSS file (core.css) is for a very generic set of rules common to all pages. The second file (additional.css) contains rules specific to items on a page (homepage, blog page and so on). The third CSS file (mobile.css) contains all media queries for mobile display. I'm also using Bootstrap.
When the files are loaded in this order:-
core.css
mobile.css
additional.css
The following media query contained in mobile.css does not get picked up by the browser.
When the files are loaded in this order:-
- core.css
- additional.css
- mobile.css
the following media query contained in mobile.css works fine.
additional.css CSS Query
.blog .blog-item.right h4, .blog .blog-item.right .item-date, .blog .blog-item.right p {
text-align: right;
}
mobile.css CSS Query
#media (min-width:768px) and (max-width:992px) {
.blog .blog-item h4, .blog .blog-item .item-date, .blog .blog-item p, .blog .blog-item.right h4, .blog .blog-item.right .item-date, .blog .blog-item.right p {
text-align: center;
}
}
Is there any reason why the top style rule has to be loaded first before the #media query is run after? What takes precedence, as I assumed that if the screen width is between 768px and 992px, that this rule would be run, over the original rule?
I'm a reasonable newbie to CSS, I'm a .NET guy, so apologies for what might be a very basic question.
Thanks
The order does matter because CSS rules can be overridden. If multiple rules match something with the same priority (the same specificity; more specific rules have higher priority), the last rule will prevail. It is not specific to multiple files, though. The same would happen if those two rules were in the same file.
In your example, loading the more general rule (without media query) would make the rule with a query obsolete, because it would be always overridden. The other way round makes sense, because the general rule will be only overridden in specific circumstances.
Short answer: Yes.
This is actually a subject I taught just last week, and I'll tell you a brief version of a one-hour class I told my students:
Bootstrap first to establish the framework
Follow with any supporting stylesheet (Owl.css, plugins.css, etc)
Next is your custom stylesheet. This is to override all of the above.
Lastly, the responsive stylesheet. This one will override all of the above systematically and programatically according to the media queries conditions being satisfied in the browser.
Doing this type of architecture will reduce the amount of (important!) drastically.
You want to be aware of a very important CSS concept known as Specificity.
If the elements affecting your media queries have the same specificity between your CSS files, then there could be conflicts.
Example:
<header class="header">Some header and stuff here</header>
additional.css could have a specific style for a <header> element, where it specifies the header selector like so:
header { background-color: red; }
However mobile.css could contain a selector for the .header class instead, in which it tries to do the following:
.header { background-color: blue; }
Due to specificity rules, guess which one will apply? The rule in additional.css
That is where thinking on your CSS structure from an architectural point of view is critical. I highly recommend you look at the differences between your files to better understand how your elements are being modified by your media queries and why.
Here is also a short discussion on contradictory CSS files asked on Stack Overflow that you might find helpful: Order of prioritization when using multiple contradictory css files.
Unless your stylesheet additional.css has a mediaquery specifying screens that are NOT between 768 and 992 pixels, there is no reason why it won't be loaded (meaning: yes, they would load normally unless you specifically cancel it out).
Media queries don't affect specificity. Therefore, a rule of thumb is to put all media queries last because you're left with specificity and order (last rules overriding all the previous ones with the same specificity).
Look:
#media (min-width:0px) {
div {background: green}
}
div {height: 20px; background: red}
<div>Nope, I won't be green</div>

changing content depending on different media queries

This is the second attempt at this question as I have worked on this since I last asked so hopefully I'll make more sense this time.
I'm creating a responsive layout for my coming soon page. The main body header changes depending on the size of the browser and the device.
<h1><span class="main__header--changer">COMING SOON</span></h1>
... and the CSS
#media (max-width: 75em) {
h1:before {
content: "HOLD ONTO YOUR HATS";
}
.main__header--changer {
display: none;
}
}
#media (max-width: 64em) {
h1:before {
content: "NOT LONG TO GO";
}
.main__header--charger {
display: none;
}
}
... and so on and son on, the different variations of coming soon contains less letters as the size goes down, right down to 'nigh'.
The only thing my way of doing this means that screen readers wont read the heading because of the display:none. Is there a different way to hide the heading but not from screen readers but that the content is shown from the css?
Thanks
You can create a hidden effect by bumping the content way outside the screen display area using margins or the text-indent property. These methods aren't what I'd call 100% clean, but they at least keep your HTML markup tidy.
Check out this helpful thread that explains screen reader interactions with CSS-hidden elements.
I also assume that in the second reference in your CSS you mean --changer not --charger.
On a side note, if the statement: .main__header--changer {display: none;} is the same across all your media queries, you should consider just writing it once outside of any queries so it applies universally without duplication in your code.
Hope this has been helpful!