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;
Related
I am calling 2 different css files. Two css properties are conflicting. But this is ignored even though the 2nd css part is more specific. Where is the problem? I looked at the CSS hierarchy. But it was supposed to run smoothly this way...
I'm not sure if this problem is related to the order of calling the CSS file.
Ignored
#media (max-width: 500px) {
div.fb_dialog.fb_dialog_mobile>.fb_dialog_content iframe:not(.hs-form-iframe) {
width: 60px !important;
height: 60px !important;
}
}
Acceptable
#media (max-width: 500px) {
iframe:not(#tidio-chat-iframe):not(.hs-form-iframe) {
width: 100% !important;
height: 100% !important;
}
}
I went through the hierarchy details and solved the problem. If anyone else has this problem later, I leave the solution here. No matter how specific the selector is in CSS, the ID selector is always more dominant. To fix the problem, I just had to add id to the ignored CSS. I figured it out with the specificity calculator. It works perfectly now.
I was wondering if anyone has attempted to create responsive spacers and come across the following issue.
I am trying to customize a specific spacer in my home page such that below a certain screen size (i.e width), the size of that particular spacer will be zero pixels. I am using word press and Elementor pro.
What i have tried to do is select the spacer, right click then edit spacer --> advanced --> custom css ... and i have inserted the following code however nothing seems to happen:
/* Remove spacer block */
#media screen and (max-width:740px) {
.spacer-block {
display: none !important;
}
}
I would really appreciate some help with this.
Many thanks,
MJ
I would recommend you to use margins instead of the spacer. For example:
#media screen and (min-width:741px) {
.my-element {
margin-top: 50px;
}
}
#media screen and (max-width:740px) {
.my-element {
margin-top: 0px;
}
}
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 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;
}