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
Related
Can't say is it a real problem or I'm just being paranoid but this behavior of media queries is really driving me crazy for last couple of hours.
Let's consider this really simple CSS.
body {background:yellow}
#media (max-width:399px) {
body {background:red}
}
#media (min-width:400px) {
body {background:blue}
}
Problem happens when width is 399.333px! (or any float-value between 399 and 400 integers)
My logic says that by using this CSS style page will never turn yellow, right? It should be red when viewport size is shorter than 400px in width and blue when it's 400px and over.
Weird behavior happens with Opera browser (I'm using 36.0 at the moment) on Windows when page is zoomed-in. I understand that viewport width is calculated using real viewport width and current zoom-level and this value should always be integer. But...
Looks like Opera doesn't round/floor/ceil that value which affects on entire page. I'm getting yellow background when Opera finds out that viewport-width is not 399px or 400px but it's 399.333px!? So none of media queries fulfills condition.
I've already tried to find an answer here and web-wide but nothing is close enough to this problem. This problem already happened to me when I was using em units so I could work around and turn them to pixels, but I can't affect user's decision about using browser's zoom feature.
Is there something I can do to prevent this or that's just the way it is?
The easiest way to simulate this behavior is hitting CTRL,+ three times and than easily move vertical slider in Object Inspector.
update:
Yes, I can fix it with "mobile/desktop first" approach by linking each media break-point to previous one but that's not part of my question. Also, default body style is here as visual aid only and changing that really doesn't solve problem.
A simple solution could be the following:
body {background:yellow}
#media (max-width:400px) {
body {background:red}
}
#media (min-width:400px) {
body {background:blue}
}
The rules in the last media query will simply overwrite any parameters that exist previously, just because of the order.
That way there won't be a situation/width which isn't covered by these two media queries: Everything up to 399.9999... (whatever) fulfills the first condition, everything above 400 will meet the second condition, and if the width is exactly 400, the rules in the second media query will overwrite the previous ones due to their order.
Similar layout
The answer to this question should be to avoid the problem altogether, and simply leave one of the media queries out, and let one media query override the other:
body {background: red;}
#media (min-width: 400px)
{
body {background: blue;}
}
However, when you need a fundamentally different layout, this would cause a lot of additional code simply to reset one case from the other. As is the case in the following example:
.some-element {background-color: red;border-left: 30px;}
#media (max-width: 399px)
{
.some-element {border-left: none;padding-bottom: 40px;}
}
Whereas it would be shorter and more elegant to write:
.some-element {background-color: red;}
#media (min-width: 400px)
{
.some-element {border-left: 30px;}
}
#media (max-width: 399px)
{
.some-element {padding-bottom: 40px;}
}
But neither of the media-queries in the last example code will take effect if the width is for instance 399.5px. Read the next part of this answer, if you still wish to write such code with perfect coverage.
Use floating-point numbers
Unfortunately the media queries for min-width and max-width values are always inclusive. A browser uses fractional pixels when it has zooming capabilities. Therefore, a simple solution to this problem is to increment your threshold pixel value of 400px with the lowest possible fraction, for instance to 400.00001px. However, the crucial question then remains, what is the lowest possible fraction?
The CSS specification does not say anything about which data types are used to store numbers:
A <number> can either be an <integer>, or it can be zero or more digits followed by a dot (.) followed by one or more digits.
But according to the answer to 'Why does Bootstrap use a 0.02px difference between screen size thresholds in its media queries?':
Indeed, cross-browser compatibility is the reason: according to Bootstrap's source, 0.02px is used "rather than 0.01px to work around a current rounding bug in Safari.
Apparently, bootstrap being a widely used framework, it seems that 0.02 would be the correct value to use in this specific case.
In your case, to get a perfect coverage of your media queries - and thereby prevent a yellow background, the solution would look like this:
body {background: yellow;}
#media (max-width:400px) {
body {background: red;}
}
#media (min-width:400.02px) {
body {background: blue;}
}
Use CSS4
As of CSS4 you may use intuitive operators for media queries such as >= and <= instead of min- and max-, and more importantly, additionally you may use exclusive operators such as > and < which immediately solves the problem (see here).
However, it may not be widely supported. Unfortunately, this feature is not yet on Can I Use to check browser support. You may check it yourself using this codepen. It seems to work in the latest version of Firefox.
The solution would then be as simple as:
body {background: yellow;}
#media (width <= 400px) {
body {background: red;}
}
#media (width > 400px) {
body {background: blue;}
}
I have the following code in my _header.html.erb
<a class="navbar-brand" href="#"> Brand </a>
I want this to display on mobile but not on large displays...
I have:
.navbar-brand {
visibility:hidden;
}
in my general css.
I use media queries to counter the above code, but not successfully.
#media screen and (device-aspect-ratio: 40/71) {
.navbar-brand{
visibility:visible;
}
}
The result is that, the brand shows up no-where.
The code above is intended to target an iPhone5. Is it possible that other devices have the same a-r and the display won't be shown? Or is the above #media an appropriate way to accomplish what I am trying to achieve.
I would advise using width for media query to target phones, if your okay with a person minimizing the browser's width and seeing the same result
.navbar-brand {
display: block;
}
#media only screen
and (max-width : 321px) {
.navbar-brand {
display: none;
}
And yes it is possible other devices have the same ratio. Specifying this way is troublesome from my experience, and I advise the way above. If you really want to target a specific device, do a quick script check for user agent string of the specific device and load css special for that device below your regular css.
In CSS, if you have two rules that target the same element, there are a number of factors that control which one applies. The two that matter to us are specificity and order.
Specificity means "which rule is more specific?". Consider this HTML:
<div>
<p>Test</p>
</div>
And this CSS:
div p {
color: red;
}
p {
color: blue;
}
In this case, the text will be red. div p is a more specific selector, so that rule overrides the red text set by the p selector.
If two rules have the same specificity, then the order comes into play. Later rules have precedence. Let's change our CSS above to the following:
div p {
color: red;
}
p {
color: blue;
}
div p {
color: green;
}
Now we have two rules with the same specificity. The last one will apply, so our text will be green.
So how does this relate to your problem? In two ways:
Media queries don't increase specificity.
The Rails asset pipeline can change your CSS ordering.
If your mobile CSS is included in the same file as your desktop styles, make sure it's at the bottom of your file, so your mobile rules override your global rules above. And if you're putting it in a separate file, you're going to have to list all of your CSS files in app/assets/stylesheets/application.css and put your mobile.css at the very bottom of your //= require rules, so it gets loaded after all the others. If you allow the Rails //= require_tree . to include your mobile stylesheet, the order will be undefined (but is almost always alphabetical). Which means that your mobile rules won't apply if they're trying to override something in a file starting with something from the second half of the alphabet. Your un-media-queried rules will override the media queried ones.
I realize this is old, but the answer for me was slightly different, and while I don't like my answer as I try to avoid using (!important) when possible, the only thing that worked for me currently was to add !important after my desired visibility setting in the media query.
.menuNavDropdown {
visibility: visible !important;
}
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.)
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.
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.