I have created a media query to shrink a div's (#example in this case) padding if the screen width goes below a certain point. See the example below.
@media screen and (max-width: 733px) {
#example {
padding-left: 90px;
}
}
This query works perfectly in IE 11, Firefox Quantum, and Edge. However, when I test it in Chrome, I get the same result as if the query wasn't even there.
After doing some research, I have added slight variations of a viewport entry in my HTML header, and at the moment my entry in <head></head>
is:
<meta name="viewport" content="width=device-width" />
(I have also used "width=device-width, initial-scale=1" with no better result)
Lastly, I have also tried using @media only screen
instead of @media screen
, and this has not worked either.
For some final details my html file is a cshtml file if it makes a difference (this is for a webapp), and I am testing through the VS2017 Community debugger.
Thank you!
Try adding this to your
CSS
:and this to the
<head>
section of the HTML document:This code is tested and works. If it doesn't work for you, you might have problems somewhere else in your code, possibly your
CSS
. In that case please post a link to your site or add some more code, preferably yourCSS
.