CSS: max-width for @media query not working
HtmlCssMedia QueriesHtml Problem Overview
(It works on other browsers but not chrome)
I want to apply a style only when the browser size is less than 1400px
with max-width
not working
@media only screen and (max-width:1400px) {
.heading-left {
left: -0.5%;
}
}
with min-width
its working
@media only screen and (min-width:480px) {
.heading-left {
left: -0.5%;
}
}
But also alters when browser width is above 1400px (I know thats how it works but max-width is not working)
Fiddle for this
Html Solutions
Solution 1 - Html
Have you tried adding the viewport in?
<meta name="viewport" content="width=device-width, initial-scale=1">
Viewport is used when rendering responsive pages and is therefore mostly used when dealing with mobile websites, but when dealing with media queries it helps tell the CSS what the actual device-width is.
Solution 2 - Html
Is your browser zoom
-ed at different than 100%
level ? If so, zoom to 100%
(Ctrl+MouseWheel
)
Solution 3 - Html
Try this method.
>This will target based on device
@media screen
and (max-device-width: 1400px)
and (min-device-width: 480px)
{
.heading-left {
left: -0.5%;
}
}
>To target based on browser window area
@media screen
and (max-width: 1400px)
and (min-width: 480px)
{
.heading-left {
left: -0.5%;
}
}
Solution 4 - Html
You need to place the @media queries after you declare your standard
Solution 5 - Html
This worked for me
@media screen and (max-width: 700px) and (min-width: 400px) {
.heading-left { left: -0.5%; }
}
Solution 6 - Html
If you've tried everything and you're still stuck, remember that media queries need to be at the bottom because CSS is applied from top-down.
If you have
.container {
color: white;
}
and you want the font to be pink for screens less than 600px wide, your other media query needs to be below the original .container style.
.container {
color: white;
}
@media only screen and (max-width: 600px) {
.container {
color: pink;
}
}
So if your media queries are at the top the default colour of white will override the media query for pink.
Solution 7 - Html
Another thing that can happen is that you do something really stupid like:
@media only screen and (max-width: 1400) { ... }
Make sure you put the px to identify what the quantity of your max-width is.
@media only screen and (max-width: 1400px) { ... }
Not that I've ever been stuck for an hour on something so simple..
Solution 8 - Html
This problem caused me several hours to figure it out with Bootstrap 3 when it just doesn't work. The reason is in the header of each web page, it needs this meta view element.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
More details https://www.w3schools.com/css/css_rwd_viewport.asp
Solution 9 - Html
@media only screen and (max-width: 1000px) {
/*Don't forget to add meta viewport in your html*/
}
If it's not working try to inspect elements in the browser by navigating to the network in developer tools and toggling disable cache.
Sometimes it's not working because of the browser cache.
Solution 10 - Html
There is one thing I would like to add here, which is only applicable if you have different CSS files. If some values do not seem to be having any effect then check if the CSS file that has the media queries is at the bottom inside the element or not. It is best to always put the media queries CSS file (if made in a different file) at the bottom of all other CSS links.