Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

@media only screen and (max-width: 479px) not working for mobile

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;
  }
}
like image 767
Shilp Avatar asked Apr 02 '13 13:04

Shilp


People also ask

Why my @media is not working?

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.

What does it mean @media only screen?

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>

What is the max width for mobile devices?

The screen resolutions of different devices are listed below: Mobile (Smartphone) max-width: 480px.

What is the difference between @media and @media screen?

@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.


1 Answers

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.

like image 162
David Taiaroa Avatar answered Sep 28 '22 07:09

David Taiaroa