I am using a child theme (of twentyfourteen) and am trying to remove the padding of a particular element. The code in-question appears as such in the parent style.css:
#media screen and (min-width: 846px) {
.content-area,
.content-sidebar {
padding-top: 72px;
}
}
When modify the padding to 0px thusly:
#media screen and (min-width: 846px) {
.content-area,
.content-sidebar {
padding-top: 0px;
}
}
and insert at the end of the PARENT style.css, I achieve my desired results (padding changes to 0px). However when I insert the identical code at the end of the CHILD style.css, it does nothing (the padding remains at 72px). Anyone know why this happening?
CSS rules are parsed in order, with the rules at the end taking precedence over the rules at the beginning. In other words, if the same selector appears twice (even in different files), the second copy will overwrite the first. If your custom CSS is loaded before the theme's CSS, the theme CSS will take precedence. You can see this happening if you use the inspector (F12 in Chrome) to see which copy of the selector the browser is actually referencing.
CSS also respects specificity moreso than order, so you can also try making your selector more specific than the theme's. For example, imagine .content-area and .content-sidebar are inside a wrapper called .content-wrapper. If you do something like this, it will override the original selector:
.content-wrapper .content-area,
.content-wrapper .content-sidebar {
padding-top: 0px;
}
Related
I want to know why the media queries has less priority than normal css?
How to work around to make the media queries more important?
#media screen and (min-width: 100px) and (max-width: 1499px) {
.logo img {
width: 120%;
}
}
.logo img{
width: 100%;
}
<div class="logo">
<img src="http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg" alt="image">
</div>
This has to do with the way the Cascade in CSS works. When two conflicting rules target the same element, the browser uses the rules of the cascade to determine which one to apply.
Selector specificity is the most important part of this: styles with a more specific selector will override those with a less-specific selector... but
media queries do not change the specificity of your selectors. This means that your two selectors have the same specificity. When that happens, the one appearing later in your stylesheet will override the earlier one.
Your easiest and best fix is to swap the order of your rulesets:
.logo img{
width: 100%;
}
#media screen and (min-width: 100px) and (max-width: 1499px) {
.logo img {
width: 120%;
}
}
This way, the media query comes later, and will override the earlier rule when the media query matches the viewport size.
If that's not an option for some reason, you will need to increase the selector specificity of the rule you want to win. Changing it to the following would work:
#media screen and (min-width: 100px) and (max-width: 1499px) {
.logo img {
width: 120%;
}
}
.logo a img{
width: 100%;
}
This way the selector now has two tags and a class, or [0,1,2], making it more specific than one tag and one class, or [0,1,1] (the zero in each of those indicates no ids, which are highly specific).
Do not use !important to fix specificity issues like this. If you need to override the style again elsewhere, the only way to do it is to add another !important. This will eventually lead to !importants all over the place, and then you will still need to deal with the specificity of the selectors.
While linking the css files in head section, just include the file with the media queries at the last. This way, it can override other style rules, if they have same specificity.
This worked well for me.
I know this may seem like a very simple question, but please understand I know very little about CSS.
Essentially, I have a responsive website with two columns. I want to add an ad on the right for Desktop, and one of the left for Mobile. So far so good, I only have to copy and adapt the code they provide on their website, and this did work for mobile, hiding the ad:
<style type="text/css">
.adslot_1 { display:inline-block; width: 320px; height: 50px; }
#media (max-width: 400px) { .adslot_1 { display: none; } }
</style>
<ins class="adsbygoogle adslot_1"
data-ad-client="ca-pub-1234"
data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
However, how can I adapt this for desktop? I assumed all I had was to change the max-width: 400px to min-width, but it doesn't seem to be working at all... any ideas on why, and how can I fix it?
In many cases scripts that insert content dynamically tend to modify the element's inline CSS properties and that usually overrides the style definitions, because of specificity. You can learn more on specificity in CSS on MDN.
What I would recommend you to do is to add !important to your style definition to see if that does hide the element. Your style should look something like: (I added some extra info to the #media query.
.adslot_1 {
display:inline-block;
width: 320px;
height: 50px;
}
#media only screen and (max-width: 400px) {
.adslot_1 {
display: none !important;
}
}
What you could also do is open your browser's inspect tools (developer tools) and inspect that specific element to see which styles are being applied and also check that based on media query.
First, let me say I've looked all over for this solution and am completely stuck. I've followed suggestions of importing media queries from a separate file after my other css rules, I've used an ancestor to target the span in the query to try and override the inline styling, I've tried just about everything else I can think of.
Currently, I have a span with nested spans that I want to render when the page width is between 0px and 600px. I am using react so I had to follow their guidelines for inline styling. Essentially I created an object with the display: none styling rules as the key-value pair. I then passed that to the JSX for the span. So essentially, it looks like this.
const hidden = {
display: 'none'
}
...
<span className="blah" style={hidden}>
<span>blah</span>
<span>: </span>
{deleteButton2} //this is a separate span generated conditionally, doesn't relate to this.
</span>
So now I have in my media query:
#media screen and (min-width: 0px) and (max-width: 600px) {
//other rules that work fine
...
.blah-ancestor > .blah {
display: inline //I've tried inline, inline-block, and block, none of which are working.
}
}
Please, I really need some help here. I'm quite literally pulling my hair out over this and I have 0 tools in my toolbelt to deal with this kind of bug as I've never run into something quite like this yet.
Inline styles always have priority over internal or embedded CSS, and over external CSS. This is shown to some degree on the <style> MDN documentation.
You could simply remove the inline styles and use two media queries or the mobile-first approach to show/hide the .blah.
Here is the mobile first approach:
// Smallest screens 0px - 600px, no media query
.blah-ancestor > .blah {
display: inline;
}
// Small screens above 600px
#media screen and (min-width: 601px) {
.blah-ancestor > .blah {
display: none;
}
}
This way you completely get rid of inline CSS and with that, you eliminate some of the priority issues.
I am trying to redefine the width of col-md-4. If I go directly to the bootstrap file and edit the code below, it works. But when I open a new css file and put in the codes below and redefine the width, it does not work. Why? The problem I am trying to solve is because in IE7, I have 2 items in a row instead of 3, so I am trying to reduce the width by redefining it, so that 3 items will be on a row. Perhaps there are other suggestions?
#media (min-width: 992px) {
.col-md-4 {
width: 33.33333333%;
}
}
A more specific selector would be applied. You can read more from this article.
For your case, you can rewrite the rules to be more specific or by adding an !important tag for the attribute.
.col-md-4.wide { /* Or another more specific selector */
OR
width: 33.33333333% !important;
I've built a page using Wordpress, and am now trying to modify is using CSS. I want to remove the top padding from a particular element on my page. After inspecting the culprit element (using Chrome-->Inspect Element), I see that it has a class of .content-area and a top-padding of 72px. Here is the relevant CSS info yielded by inspect element:
.content-area, .content-sidebar {
padding-top: 72px;
}
However, when I insert the following into my style.css:
.content-area{
padding-top: 0px;
}
the padding remains. Any thoughts on what I'm doing wrong, or how to resolve?
sometime time this property can be inherited by parent class so you can try to this code
.content-area, .content-sidebar {
padding-top: 72px !important;
}
Thanks all. I changed the CSS to:
#media screen and (min-width: 846px) {
.content-area {
padding-top: 5px;
}
}
and the padding disappeared. Other media queries in CSS aren't as intuitive, but at least this works for now.