CODEWITHSUNDEEP
androidhtmlcsscordovamedia-queries
user
user

Reputation: 1001

How to implement Media Queries for android devices with small screens?

I am working on a Phone gap project. I have implemented a swipe view feature. I have used an image for the background of the text. The image size is around 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 could not see the box.It was just an empty screen.

Is there any mistake in my implementation?

Upvotes: 2

Views: 897

Answers (2)

Mohamed S. El-Din
Mohamed S. El-Din

Reputation: 36

First of all add this meta tag at your html file.

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

Upvotes: 1

Cana
Cana

Reputation: 2204

I don't know if you did it in your app, but here you have two semi-colon at the end of your CSS code 

@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; **;**
   }
}

Upvotes: 1

Related Questions