Menu
I am using CSS @media tag and max-width. The requirement is to have smaller text size on large screens, and bigger text size on mobile screens. So at a basic level I have:
body {
font-size: 13px;
}
@media (max-width:991px){
body{
font-size:24px;
}
}
This works fine, but I have elements on screen that open iframes on the screen with widths smaller than 992px, so they will have a giant 24px font on them even on large screens. Is there a way I can make the max-width rule follow the screen width rather than the iframe width?
820
asked May 09 '26 07:05
Specific your body with an id then style by this id like this:
<body id="mainBody">
...
</body>
@media (max-width:991px){
#mainBody{
font-size:24px;
}
}
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
