My mobile version (max-width : 479px) does not show #111 for the background color. Instead, #000 appears as the background color. Please help me.
@media only screen and (max-width: 1024px) {
body{
background-color:#ff0000;
}
}
@media only screen and (max-width: 767px)
{
body{
background-color:#000;
}
}
@media only screen and (max-width: 479px)
{
body{
background-color:#111;
}
}
Media process errors on Android can be triggered by a long list of factors. For example, maybe you're running low on RAM and storage space. Clear the cache, check for updates, remove the SD card and check if the error is gone. As a last resort, reset your device to factory settings.
only screen: The only keyword is used to prevent older browsers that do not support media queries with media features from applying the specified styles. Syntax: @media only screen and (max-width: width) Example 2. <! DOCTYPE html>
The screen resolutions of different devices are listed below: Mobile (Smartphone) max-width: 480px.
@media is the actually media query. The word screen is adding the 'conditions' to the media query. So @media screen is telling the media query to apply (whatever other conditions) to screens. For example, @media screen and (max-width: 360px) will target only screens with a max-width of 360px.
In the head of your document, make sure you have
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If you omit this, then many devices will scale the page to fit the viewport.
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