I am working on a legacy site for someone where a media query does not seem to be having an effect on 1 out of 3 classes. The classes affected are .free-ship, .wholesale, .chronicles
The css for these on standard screen sizes is:
/* Shipping section - Home page */
.free-ship, .wholesale, .chronicles {
text-align:center;
height:180px;
width:30%;
}
.chronicles {
margin-right:10px;
}
.chronicles a, .wholesale a {
color:#fff;
}
Now I have in place the following css as media queries:
/* Media Queries */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
.free-ship, .wholesale, .chronicles {
width:100%!important;
}
}
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
.free-ship, .wholesale, .chronicles {
height:230px;
}
}
The problem is, the media query does not seem to apply to the .wholesale class and I can't figure out why? Again, this is not my site, I am just trying to help out. The site is here (removed for privacy). The code refers to the black/grey boxes near the middle of the page.
Any suggestions would be most welcome. I've checked the custom.css file with css lint and this hasn't shown any errors so i'm looking for where I should look next?
Thank you in advance.
D
On the live site, it looks like the query isn't targeting ".wholesale," but instead it's targeting an older class called ".world-ship".
You may have changed the class name and it didn't get changed in the media query, or else it hasn't been pushed to live.
Media Query with ".world-ship" class
Ok...The issue was a complete oversight on my part, I forgot the site was cached through a CDN, so even though i've updated the css file and cleared the site cache many times, the changes were not taking affect. I've purged the cache on the CDN and its updated.
Clearly a wood for the tree's problem. Thanks for the answers and comments.
Related
With respect to the following link:
What is the difference between "screen" and "only screen" in media queries?
"only" is used in media-query so that old browsers, which do not support media query should read only (and as hyphenated or alphabets are not present, but a space - they will stop further reading) and the rest of the code will not be applied (as 'only' is not a device type).
In conclusion, we should always write "only" as good practice and our code will be like this:
#media only screen and (min-width: 300px) and (max-width: 800px) { ... }
But, with that logic and applying only to prevent old browsers from messing up code whhile they don't support media query and otherwise screen keyword after being read - the following CSS will be applied globally (see the link above).
Now, what if I want to write certain media query for all platforms, viz. https://www.w3.org/TR/CSS2/media.html
What should my correct code be now:
#media only all and (min-width: 300px) and (max-width: 500px) { ... }
OR
#media all and (min-width: 300px) and (max-width: 500px) { ... }
Remember, all is a device-type keyword, so with the same logic, older-browsers will (if only keyword is not used), whatever CSS code is present will be applied globally.
On the other hand I have never seen a code such as only all so what I expect is to be syntactically-wrong and CSS will not run.
Now, can someone provide me solution with reason, which of the 2 options is correct?
Since all browsers right now support media query you can just use #media and it will work without any problem. Also bootstrap uses #meida which is something that works on all browsers right now.
#media (min-width: 300px) and (max-width: 500px) { ... }
Therefore you just need to use #media and you will get the same result as if you used
#media only screen and (min-width: 300px) and (max-width: 500px) { ... }
Please refer to this link am sure it will be helpful MDN #media
Also, this link is extremely useful MDN media query
I'm creating a small react app, and have run into an issue with the css.
My css is laid out in this general format
<-->
Shared classes/properties{}
<--->
<--->
#media only screen and (max-width: 991px){}
#media only screen and (max-width: 480px){}
<--->
The issue is: When looking at a phone (e.g. iPhone X), it is using the classes from max-width:991px instead of max-width:480px.
The expected behaviour is:
max-width:480 should cover 0px-480px
max-width:991 should cover 481px-991px
However currently, 0px-991px is only uses classes from max-width:991.
I've tried (min-width: 0px) and (max-width: 480px) and its counterpart, but it's still not behaving as expected.
I'm sure there's a gap in my understanding - can someone point out what I'm doing wrong?
You didn't post much code, but from what you posted, I would say you need to add the word "and" between "only screen" and "(max-width: ...)" in both lines:
#media only screen and (max-width: 991px){
...
}
#media only screen and (max-width: 480px){
...
}
From MDN:
The and operator is used for combining multiple media features
together into a single media query, requiring each chained feature to
return true in order for the query to be true. It is also used for
joining media features with media types.
--> You are combining screen and a max-width here. Using "and" combines both.
I'm using scss and I just want to disable hover features on mobile for a very specific section of code. It's a nested div using the & prefix. So, basically:
.superclass{
.subclass{
#media not all and (pointer: coarse) {
&hover{
hover style
}
}
}}
Would this work? Right now I'm dealing with build issues keeping me from deploying my application locally and verifying that way.
Why don't you use a traditional size approach for mobile?
#media only screen and (max-width : 320px) {
/* Styles */
}
This is how i code my desktop CSS like this.
#media (max-width: 1367px)
This is my iPad CSS
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1)
and (min-resolution: 132dpi)
Unfortunately, the CSS codes that i used to code the desktop CSS clashes and overwrite the CSS of the iPad. Why is this so? Each target different devices but why do they clash with each other despite iPad's media query being more specific.
The 2 media queries are not mutually exclusive, and as such are both processed in order when both apply - media queries have no specificity, just applicability. It then becomes a matter of specificity at the CSS level: more specific rules in CSS get precedence, and in case of identical specificity the last definition is used.
Example:
#media (max-width:1300px) {
p { color:green; }
}
#media (min-width:1000px) {
p { color:red; }
}
For a browser between 1000 and 1300 pixels both rulesets apply, and since both contained rules are equally specific the latter 'wins' - paragraphs will be red.
More on how CSS cascades can be found here in the specs, specifically section 6.4.3 is a must-read for every webdeveloper.
I have a VERY simply html form (an image with some text & select fields) which I would like to change to be available also for mobile devices.
What's the SIMPLEST solution for accomplishing this task ?
I found many explanations on the web, but they are all much too complex for my needs... Basically I just want to have the width of the form adjustable according to device, nothing more :)
Any reference to a SIMPLE tutorial that explains how to do the most basic adjustments for mobile ?
You could use CSS3 Media Queries to build a Responsive Layout.
For instance:
#media (max-width: 767px) {
.yourFormClass {
/* Some rules */
}
}
#media (min-width: 768px) and (max-width: 979px) {
.yourFormClass {
/* Some rules */
}
}
/* other resolutions... */
I suggest you to read these articles:
How To Use CSS3 Media Queries To Create a Mobile Version of Your
Website;
CSS media queries by Mozilla Dev.