I have checked similar questions and what seems to be missing in their code is:
<meta name="viewport" content="width=device-width, initial-scale=1">
Now, I have this code already but CSS media query still seems not to work.
This is my style sheet:
.calculator__container {
border: 1px solid black;
border-radius: 3px;
padding: 5px;
text-align: center;
margin-left: 40vw;
margin-right: 40vw;
margin-top: 25vw;
padding-top: 40px;
box-shadow: -9px 4px 21px -2px rgba(0,0,0,0.75);
}
#clear {
background-color: red;
color: white;
};
@media only screen and (max-device-width: 500px) {
.calculator__container {
border: 1px solid black;
border-radius: 3px;
padding: 5px;
text-align: center;
margin-left: 10vw;
margin-right: 10vw;
margin-top: 25vw;
padding-top: 40px;
color: blue;
box-shadow: -9px 4px 21px -2px rgba(0,0,0,0.75);
};
#clear {
background-color: red;
color: pink;
}
}
Can I get any help, please?
Use max-width
instead of max-device-width
. Device width is dependent on the width of the device, not the browser window, as such will not alter when you resize your browser window if viewed on a desktop screen at 1920 x 1080 for example as the max-device-width will remain constant at 1920px.
.calculator__container { border: 1px solid black; border-radius: 3px; padding: 5px; text-align: center; margin-left: 40vw; margin-right: 40vw; margin-top: 25vw; padding-top: 40px; box-shadow: -9px 4px 21px -2px rgba(0,0,0,0.75); } #clear { background-color: red; color: white; } @media only screen and (max-width: 500px) {.calculator__container { margin-left: 10vw; margin-right: 10vw; color: blue; } #clear { color: pink; } }
<meta name="viewport" content="width=device-width, initial-scale=1"> <div class="calculator__container"> Calculator container. </div> <div id="clear"> Clear. </div>
.calculator__container { border: 1px solid black; border-radius: 3px; padding: 5px; text-align: center; width: 20vw; margin: 25vh auto 0 auto; /* top, right, bottom, left */ padding-top: 40px; box-shadow: -9px 4px 21px -2px rgba(0,0,0,0.75); } #clear { background-color: red; color: white; } @media only screen and (max-width: 500px) {.calculator__container { width: 80vw; color: blue; } #clear { color: pink; } }
<meta name="viewport" content="width=device-width, initial-scale=1"> <div class="calculator__container"> Calculator container. </div> <div id="clear"> Clear. </div>
This is what worked for me. I find it weird though since I have done other projects without including the min-width
:
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.