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
Related
I'm currently trying to override a piece of styling made earlier in my code to my section-header with the padding, but having difficulty in doing so. I'm trying to center the section header on desktop sizess only.
My original section-header is like this:
.section-header {
padding-left: 10%;
}
And my media query is like this:
#media #{$desktop} {
.section-header {
padding-left: 0;
text-align: center;
}
}
I've already used !important but my mentor tells me to avoid it. How can I override this and make this change?
CSS works in multiple ways and can become a mess which is why your mentor mentioned not using "!important" where possible.
One thing to note is if your section rule is after your media query rule, it will override the media query rule.
Also, consider specificity. The more specific you are with your targeting the more important that rule is.
Quick question. Have you opened it up in Inspect to see whether it's even showing? So possible cache clear issue etc?
If it shows in inspect element, it might worth checking whether there is something with higher specificity overriding it.
It's hard to give a fix above the above without seeing but that won't be accepted on here...
I have made a complete Bootstrap grid system. I am now uploading my code to a CMS system, and can see there is some CSS from the backend, there is messing up my grid.
If I untick the following code in the inspector window, everything is looking perfect. When the following code is ticked in the inspector window everything is messed up. Is it possible to overwrite this code somehow, so the class is not used?
.cms-area img {
width: 100%;
}
You can use !important in such cases but use it sparingly. Best is to remove the unwanted code and not use !important. !important might cause issues later that are difficult to debug. If possible include your css after other css is included in the code. In CSS, rules that appear later take precedence over earlier rules
Edit:
Set width to auto instead of 100% to fix your alignment issue
Below given is the ideal way to manage css since it allows you to attribute your style content and lets you override the style already applied elsewhere.
.cms-area .your-class img {
width: <your choice>;
}
IN order to keep the CSS rule I want for a div I have to add: "padding-left:70px!important" to apply generally.
but for the mobile, i would like padding-left:0px.
So I simply add to the media query of the mobile size "padding-left:0px!Important"
So I thought that automatically when switching to mobile size it will take the CSS style inside the media query as the one to use as both have!Important.
But does not happen, it still keeps the 75px padding.
Thanks
Order matters, later one with !important will overwrite previous (!important) one, see example below, whatever media query works for your mobile, make sure you order them correctly
(move your global CSS to top, and media query to bottom)
.test {
color: red !important;
}
.test {
color: green !important;
}
<span class="test">TEST TEST TEST</span>
CSS styles will take the most specific rule you supply, so make sure that your padding-left:0px!important rule is still more specific than the one declaring padding-left:70px!important.
If the specificity is identical, then CSS will use the last rule defined, so also ensure that your mobile override appears after the initial padding-left rule.
This is where you can check and understand specificity:
https://www.w3.org/TR/css3-selectors/#specificity
Bonus: calculate selector specificity: https://specificity.keegan.st/
Let I have 2 classes named class1 and class2. Also I have an element with id="responsive_element". What I want is to assign class1 to this element when screen size is below 768px and class2 otherwise.
I can do this in Less like:
#media screen and (max-width:768px){
#responsive_element{
.class1()
}
}
#media screen and (min-width:769px){
#responsive_element{
.class2()
}
}
Is there any "CSS only" way to achieve this?
Edit: I think I couldn't explain my question clear enough. I am already able to do this by compiling less, but the size of css file grows for the long class definitions and using them too much. I want to handle it with simply changing class of the element .
Except for the .class1() and .class2() calls, your Less code already is CSS. Specifically, the #media queries that apply styling based on screen size aren't Less-specific. So, for example, the following is pure CSS:
#media screen and (max-width:768px){
#responsive_element{
color: blue;
}
}
#media screen and (min-width:769px){
#responsive_element{
color: red;
}
}
If you want to convert your Less into CSS, all you need to do is copy the CSS code from .class1 and .class2 into the place of the .class1() and .class2() calls. In fact, since Less is implemented as a converter to CSS, you can just use the online converter at LESS2CSS to do the conversion for you.
If you're asking if there's a way in plain CSS to write these queries so that they use an existing .class1 and .class2 style definition without copying, then I believe the answer is no. The main reason Less was invented was because CSS doesn't support this kind of reuse of styling information.
If you mean, is there a way to use CSS alone to change the class of an element in response to changing screen sizes (literally, adding or removing new classnames to the element's HTML "class" attribute so CSS for different classes will take effect on that element), then the answer is simply "no, you cannot do this with CSS alone".
(Less can't do this either. Your original Less code doesn't change the class attribute of the element, as you can plainly see by looking at the generated CSS. It just uses classes as a handy trick to name sections of shareable CSS.)
The only way to change the element's class in the manner you seem to want is to make changes to the DOM, which you can obviously do via JavaScript but not with CSS alone.
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>