I've been working on a project with PhoneGap where I added a swipe view feature. For the background of the text, I used an image that is sized around 304 * 250.
Everything was running smoothly on screen sizes of 320 * 480 and 720 * 1280.
However, when I tried to test it on screens with sizes of 240 * 320 and 480 * 800, neither the background images nor the data value showed up.
To address this issue:
I decided to use a box shadow instead of the image. After implementing this change and testing it on a screen size of 320 * 480, it worked perfectly.
I then attempted to test it on screen sizes of 240 * 320 and 480 * 800 using Media Query.
While referencing a guide from here, I tried to implement it but faced difficulties in doing so.
This is my standard 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 included the CSS file like this:
<link rel="stylesheet" type="text/css" href="css/common_set.css" />
The problem: Despite my efforts, the implementation did not work as expected. The box didn't appear, leaving me with just an empty screen.
Is there something wrong with how I approached this?