I work with a page every day that uses CSS media queries I don't like; I'd rather use the full page (most of them are related to the Twitter Bootstrap menu collapsing when narrower than 768px).
Is there a way to override Bootstrap's media queries with CSS? Preferably without defining my own media queries to override all of the rules individually, as I feel like this would take a pretty long time.
Edit: I don't have control of the source code, otherwise I'd just kill the bootstrap-responsive code.
Why wouldn't you remove them in the first place?
If you can't, you still can override a CSS declaration with rules:
that have the same selector priority and come after the MQ block
that have higher selector priority than the rule in the MQ block
that have !important between the value and the semi-colon
/* one id, one class AND one element => higher priority */
#id element.class { property: value2; }
/* !important will nuke priorities. Same side effects as a nuke,
don't do that at home except if you've tried other methods */
#id .class { property: value2 !important; }
#media(blah) {
/* Overridden. Thrice. */
#id .class { property: value1; }
}
/* same selector, same everything except it comes after the one in #media?
Then the latter is applied.
Being in a #media doesn't give any more priority (but it won't be applied
everywhere, depending on "blah", that's the point of MQ) */
#id .class { property: value2; }
In the previous example, any of the declaration outside the #media block will override the one inside, e.g. there are 3 reasons why value2 will be applied and not value1.
Would like to override bootstraps responsive.css too.
I have half of the website where I want to use the default responsive.css while for another half one media query causes wrong layouts so I want to remove it.
According to my research css does not allow to remove a media query.
So I will go and copy responsive.css and remove the media query. If you have no access to the source, overrides might be the only choice.
Related
In the HTML Code (which I can't modify) there's a div with style specified in the tag. But I don't want this style to apply in a specific media query for responsive purposes.
<div style="width:calc((100% - var(--column-spacing) * 1) * 0.4375);margin-inline-start:var(--column-spacing)"></div>
I tried to just put another value in the media query for this div but it doesn't work. Is there something I can do about it?
Adding !important to the styles should work since it overrides the styles set in the style attribute.
You can use the !important property in the css to override the inline css as shown below
selector {
property: value; /* normal declaration */
property: value !important; /* important declaration (standard) */
property: value ! important; /* important declaration (non-standard) */
}
Nevertheless it is recommended to use it as sparingly as possible
I am trying to reduce the size of some titles of my commerce in responsive version. I have tried a bit of css but nothing has worked.
At the moment, I have the following for the main slider text:
#media only screen and (max-width: 600px) {.zphero-banner-style-11 .zpheading, .zshero-banner-style-11 .zpheading {font-size: 22px;;}}
This is my web
enter image description here
Where am I going wrong?
Your css path currently looks like this.
#media only screen and (max-width: 600px) {
.zphero-banner-style-11 .zpheading, .zshero-banner-style-11 .zpheading {
font-size: 22px;;
}
}
Without the associated HTML its hard to say but my initial guess is the classes that are already applied on it have greater importance than your new media query. I would try this adding !important and if it doesnt work make your selector more specific.
#media (max-width: 600px) {
.zphero-banner-style-11 .zpheading, .zshero-banner-style-11 .zpheading {
font-size: 22px !important;
}
}
fun things to note about selector importance:
100 points for IDs
10 points for classes and pseudo-classes
1 point for tag selectors and pseudo-elements
Note: If the element has inline styling that automatically wins (1000 points)
Among two selector styles browser will always choose the one with more weight. Order of your stylesheets only matters when priorities are even - that's why it is not easy to override Bootstrap.
currently your media query css selectors have a value of 20 points because there are 2 class names pointing to the change
CSS declarations marked as important override any other declarations within the same cascade layer and origin. Although technically, !important has nothing to do with specificity, it interacts directly with specificity and the cascade. It reverses the cascade order of stylesheets. Not the best practice but it works well often
I've created a custom userContent.css file for Firefox 26 running on Fedora 19.
I trying to figure out the precedence order to #-moz-document rules.
What I would like to do is to have a set of rules for the community pages and another set if rules for all other pages on the site.
I tried...
#-moz-document
url-prefix(https://discussions.apple.com/community/)
{/* rules for this page */}
#-moz-document
domain(discussions.apple.com)
{ /* different rules for all other pages in domain. */}
What I found was that my url-prefix rules were ignored.
Well if you have identical attributes in both rules, then the latter are going to overwrite the former because CSS when all thing are considered equal applies rules from top to bottom, so since https://discussions.apple.com/community/ also matches discussions.apple.com the rules from the latter will apply, if you want you can swap the order and this should help.
/*
Where to place a new css tag?
Find the conditional code, "the if statements".
The conditional code starts with #.
In some ways, you can think that all the css rules
are applied that in parallel.
In the case you add a new rule with with an attribute that you haven't used
before, the rule can be place anywhere in the conditional block that applies.
In case of conflicting attributes, the last
seen attribute is used.
*/
/* if the domain of the web page is any of these,
apply the css below, between the matching {}. */
#-moz-document
domain(discussions.apple.com),
domain(communities.apple.com),
domain(discussionsjapan.apple.com),
domain(discussionskorea.apple.com)
{
... lots of css ...
/* for pages from all devices and the width of the page
is larger than 1265px, apply the css.
Remember, we are inside of the #-moz-document conditional.
So the #media rule, only see pages that of passed #-moz-document
conditional. */
#media all and (min-width: 1265px)
{
/* styles for a large browser window */
... lots of css ...
}
/* for pages from all devices and the width of the page
is less than or equal to 1265px, apply the css. */
#media all and (max-width: 1265px)
{
/* styles for narrow browsers window */
... lots of css ...
}
} /* end of #-moz-document */
/* another conditional. The style rules will be applied
to any page with an URL starting with. Note, this
#-moz-document rules is applied separately from the
prior #-moz-document conditional. */
#-moz-document
url-prefix(https://discussions.apple.com/people/),
url-prefix(https://discussions.apple.com/welcome),
url-prefix(https://discussionsjapan.apple.com/people/),
url-prefix(https://discussionsjapan.apple.com/welcome/),
url-prefix(https://discussionskorea.apple.com/people/),
url-prefix(https://discussionskorea.apple.com/welcome/)
{
/* These rules get applied on the pages that match.
Remember, the last setting of the attribute wins. */
... lots of css ...
} /* end of #-moz-document */
I need to override main CSS of an application with my own CSS. Is there a good way of doing it ? One way is !important tag, which I want to avoid.
I was just thinking whether I can create a custom CSS media and define my CSS for that particular media. This way I can have main app CSS defined for all but my custom media.
CSS wil overwrite itself if you use the same selectors, so you won't need !important.
So:
.my-div .my-span {
color: green;
}
will be overwritten by:
.my-div .my-span {
color: red;
}
but not by:
.my-span {
color: red;
}
Yea, you can use media queries to target certain screen sizes. for example like:
#media screen and (device-width: 360px) and (device-height: 640px)
A main "feature" of Cascading Style Sheets is its cascading effect.
An amended quote on this from a number of places on the internet:
Cascade is the special part. A style sheet is intended to cascade
through a series of style rules, like a river over a waterfall. The
water in the river hits all the rocks in the waterfall, but only the
ones at the bottom affect exactly where the water will flow. The same
is true of the cascade in style sheets.
So as long as you specify the exact same rules but change some property values inside those rules, and you make sure they are loaded after the original rules, they will override the previously specified property values inside those rules. If you skip a property value in the new rule, the previously specified property value will remain in force for that property.
Media queries are the best answer to defining styles for a specific type of media. It lets you specify rules specifically for certain screen sizes.
If your particular target media cannot be properly identified by querying screen size but needs JavaScript to be identified. You could write some JavaScript which loads a style sheet when the document is loaded, in that case you only have to make sure it is loaded after the original style sheet, and it will then override styles with the same specificity.
I'm building an html5/js/css application that will exist inside of a div on my client's existing html. I want to be sure that none of the client's CSS styles are inherited by my app.
Is there a best practice to reset this div and its descendant elements?
I'm thinking I'll use something like:
#my-id * { //styles }
I'm wondering if there is a better/best-practice approach? Thanks.
That will be very difficult/likely impossible to ensure. The type of solutions that Starx is referring to assume no preset styles other than the browser defaults, and "reset" in that context refers to harmonizing the inconsistencies across various browser defaults.
But in your case, your client CSS may already contain highly specific selectors such as
#someDiv .aClass a{float:left;}
... and applying those "CSS reset" solutions simply will not override this.
You can see that Truth's selectors also have lower specificity than this, and therefore will fail to ovetride the client's styles in such cases.
Your question is very similar: How to remove all inherited and computed styles from an element?
So the short answer is: there is no way to ensure this because you cannot "remove all inherited and computed styles from an element" ... update: ...unless you can anticipate and override every preexisting style declaration with new declarations having appropriate specificity.
If you want to only recent this specific div, than what you have is fine. You forgot to reset the div itself though:
#my-id, #my-id * { /* styles */ }
You are probably looking for Eric's CSS Reset as it one of robust resets out there.
But the reset rule is applied to the whole page, instead of the just the box. SO, modify the rules, by keeping #my-id infront.