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.
Related
I don't know why grid values are not applying on settled #media 992 breakpoint on different _large.scss file, I think I'm using scss and #use correctly beacuse other properties are reacting properly on that breakpoint. (https://i.stack.imgur.com/VSnpN.jpg)
I have line in html like someone asked
In addition when I unmark grid values from main.scss values are changing like I wanted.
(https://i.stack.imgur.com/xSfsb.jpg)
It's not because of Sass or #use, You should set the display of the parent as the grid to grid-row or grid-column works on child elements.
In your case, .header should be set display: grid
Update
I reviewed this again, It's just a priority problem, Try it with !important in #media properties, or addressed it more specified (Ex. : use 'body' before .header to give it more priority in #media codes.
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 am currently working on a highly design orientated site based on wordpress CMS.
Currently I have a responsive main stylesheet linked externally for the core css. As the site relies heavily on spacing and alignments of both text and images it has become necessary to add inline css using style= HTML to sometimes override the external CSS.
The problem I have is that in most cases certain elements such as margins need to be a different percentage in the mobile view than the desktop view to balance the visual composition. Is there any way to add responsiveness to the inline CSS based on screen width as can be done in an external style sheet?
So far the only way I can think of achieving this is through jQuery amending the external CSS based on the users screen width however this would mean setting up strict rules in the JS eg: for desktop view having margins set at 70% and for mobile setting them to 90%.
If it could be possible to do this inline using html style then this would give my client stricter control and more flexibility. Luckily my client is well versed in CSS.
You could always add a block of css inline with a style element:
<style type="text/css">
#media screen and (min-width:800px) {
.inlineOverride {
/* add more styles here */
}
}
</style>
<div class="inlineOverride">
</div>
It's worth mentioning that HTML5 has introduced a scoped attribute that you can set on the style element to limit the specified style information to the style element's parent element, and that element's descendants.
It isn't widely supported yet, so shouldn't be relied on, but it could be useful in the long term to help prevent inline styles like this from "leaking" into other parts of the document.
This question/answer might be helpful for you(read it thoroughly)
use #media for adjusting your properties of css according to device width-height.
What does #media screen and (max-width: 1024px) mean in CSS?
In modern Browsers you can (kind of) archive this by using custom css properties (css variables):
#media (max-width: 1100px) {
* {
color: var(--color-sm)
}
}
<a style="--color-sm: #11f">Text</a>
(Expand Snippet or open in full page to get the other behavior)
(Color is used for simplicity of presentation, just use margin or any other css property according to your use case.)
My question is about background-images. I was designing a home page for iPhone screen and I wanted to use a slightly different image for the mobile version. My media query was not in a separate css file, just embedded in the index.html. Problem...the main css image was overriding my query image. I checked for extra brackets etc. I thought the media queries had precedence over the main css? Would I have got my desired result if I had put the Media query in a css link file?
Here is my main css code:
#container
{
background-image:url(images/1000_framec.jpg);
background-repeat:no-repeat;
width:999px;
height:980px;
margin:0 auto;
}
and below is my media-query code:
#media only screen and max-width 320px {
#container
{
width:98%;
background:url(images/1000_frameo.jpg) no repeat left;
margin-top:80px;
-webkit-background-size:contain;
-moz-background-size:contain;
-o-background-size:contain;
background-size:contain;
}
}
Media queries and #media rules are CSS. But these are transparent to the cascade, so whether you put a style rule in a #media rule or not, or whether you place it in a linked stylesheet that has media="..." or not, doesn't affect the precedence of that rule in the cascade.
The rest of the cascading rules apply as usual: the most specific selector wins, the last of a series of equally specific selectors wins, an inline style has more precedence over an internal stylesheet, which in turn has more precedence over an external stylesheet, and so on.
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.