I am facing an issue that even though I have tried various solutions, my media queries are not working on mobile devices after adding the viewport meta tag. Can anyone provide insight into why this might be happening?
Update: Upon further investigation, I discovered that the reason for this issue was because my screen was not zoomed in at 100% width.
Below is the code snippet:
@media only screen and (max-width: 1260px) {
.container {
margin-top: 300px;
}
h2 {
font-size: 3vw;
width: 800px;
}
p {
font-size: 2.5vw;
width: 800px;
}
}
@media only screen and (max-width: 550px) {
h2 {
width: 330px;
font-size: 5vw
}
p {
font-size: 4vw;
width: 330px;
}
}
Your help is greatly appreciated.