Menu
I have this HTML/CSS:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
p{
color: white;
background: black;
}
@media only screen and (max-width: 768px) {
p {
color: yellow;
}
}
</style>
</head>
<body>
<p>SOME TEXT</p>
</body>
</html>
I am using Chrome - mobile mode or I can resize the browser window, it is same.
When I make the width of the screen 767 pixels, the color of p tag is white (the style in media query not applied). When I make the screen width - 766 pixels, the color is yellow (media query style applied), but in CSS I have - .. and (max-width: 767px). 767 pixels width isn't included.
If I set in my CSS - and (max-width: 768px) and make the screen width 768 pixels, the color of the p tag is yellow, which means 768 pixels width is included.
Why is that ?
The problem here is with Bootstrap, because the class col-sm-* is for (min-width: 768px) and the class .col-xs-* apply when the width of the screen is maximum 767px(767 included, but in the Bootstrap CSS file, they don't use media query for this class).
I want style to be added when the width is max 767 pixels (when col-xs-* is active), but if I set max-width:767px, my style will be added when the width of the screen is 766 pixels. If I set the style - max-width:768px, it will add the style when the width is 768 pixels.
How can I add style for width <= 767 pixels ?
324
The solution for you is to add max width: 767.5px. It will work. But in general I would suggest avoiding using both min-width and max-width, ideally, you should write your styles mobile first, and after that modify with min-width media queries (min-width: 768px, min-width: 992px, etc...)
190
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
