How to use media Queries for android devices with

Question

I had to use an image which was of size 304 * 250.

It is working perfectly in screen size of 320 * 480 and screen size of 720 * 1280.

Now When I wanted to check the same in a screen size of 240 * 320 and screen size of 480 * 800? Neither the background images were to be seen nor the data value.

Remedial step taken:

I thought of using a box shadow instead of the image. I implemented it and tested it in screen size of 320 * 480.It was perfect.

I thought of testing the same in the screen size of 240 * 320 and screen size of 480 * 800 using Media Query

I referred from here and I tried implementing it, But I was not successful.

My normal css

.container
{
    width:80%; height:auto; margin-left:10px; margin-right:10px; background-color:#CCCCCC; text-align:justify; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; min-height:250px;
}

My Media Query CSS

@media only screen and (max-device-width: 240px) 
{
    .container
    {
       width:180px; height:150px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; ;
    }
}

I have called the CSS in the following manner

<link rel="stylesheet" type="text/css" href="css/common_set.css" />

Problem: It did not get implemented.I cannot not see the box.It was just an empty screen.

It does not access the media query css the one mentioned above.

SOLUTIONS TRIED

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />

Is there any mistake in my implementation? Please help!!

To clarify,if i have understood the 1st point of the answer

    .name_layer
    {
         float:left; width:100%; padding:0; margin:0; line-height:35px; height:35px; color: #FFFFFF; font-size:20px;
    }
    .name_layer_text
    {
        margin-left:1%;
    }
    .swipe_body
    {
          padding:0; margin:0; width:100%; height:480px; 
    }
    .container
    {
             width:200px; height:10px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; 
    }
    @media only screen and (max-width: 240px) 
    {
      .container
      {
            width:180px; height:150px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; ;
      }
    }

Is this correct? but my output comes according to the container CSS... and i am test it on a device not browser

edit:2

    @media only screen and (max-width:240px)  
    {
      .container
      {
            width:180px; height:150px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px;
      }
    }       
    @media only screen and (min-width:240px)
    {
         .container
        {
                 width:250px; height:250px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; top:5px min-height:200px;
        }
    }

It is a smaller device and is taking the 2nd CSS- min-width: 240px

Answer 1

These are few possibilities why your media query is not working.

1. When you used media query CSS, did you remove your normal CSS? Or did you keep both? If you want to have both, then you need to keep them appropriately else normal CSS will over write the one inside media query.

   For example if your css is like this ...

   @media only screen and (max-width: 241px) 
   {
       .container
       {
            width:180px; height:150px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; ;
       }
   }
   
   .container
   {
        width:180px; height:150px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; ;
   }
   

   The .container style which is outside the media query will overwrite the one inside the media query.So if there are styles which are specific to resolution of the device then you must wrap them inside the media query.

   Styles which are not related to resolution of the device for example like color of heading which is same in all resolutions should be outside the media query.

2. One possible issue can be media query is not matching with the resolution of the device.

3. Also please check in which orientation you are trying to view.

4. If you are testing on browser you will see the styles inside media query only when you reduce the width of the browser to satisfy the media query. Very important! Because by using media query you say to browser that apply this only when width is this much. For example to see the changes inside media query of max-width 241px you need to reduce the width of your browser to less than 240px (just reduce the width of browser to very minimal)

You can try following media query for a device of resolution 240*320.

I think I found solution for your problem you need to remove -device- from media query (testing on browser?)

@media only screen and (max-width: 241px) 
{
  .container
  {
   width:180px; height:150px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; ;
  }
}

You can try following media query for a device of resolution 480*800

@media only screen 
and (min-width : 480px) 
{
/* Styles */
}

Note: Be very cautious with media queries. when you set min and max they will apply for all the resolutions which satisfy the min and max.For example the above media query will apply for all devices whose width is greater than 480.