0

I am developing screen for iphone & android mobile using HTML5,CSS3.

Whatever style I written inside of media queries its not affecting my design. Suppose I place those style outside of media queries its working fine..

Please let me know the reason..

Here I given my jsFiddle sample code.. 

<body>
<header>
  <div> <img src="images/Uconnect_header.png" width="480" height="114"> </div>
</header>
<section> 
    <div id="headingTxt"><h5>UCONNECT ACCESS SERVICES</h5></div>
    <p class="descriptionTxt">Services intro copy will go here and need to be dynamically filled according to new and existing schemas. This could be larger or smaller then what is displayed here.</p>
    <hr>


body{
    margin:0px;
    padding:0px;
    background-color:#CCC;
    width:480px;
    border:1px solid red;
}
section{
    margin:10px;
}
@media only screen and (max-device-width: 480px) {

    #headingTxt{background-color:#009966;}
    .descriptionTxt{color:red;}
}

http://jsfiddle.net/prabunivas/dkdRt/

SPN
  • 67
  • 8

1 Answers1

0

try this one @media (max-width: 480px) { ...

to be able to check with browser resizing while developing.

See this answer for differences between max-width and max-device-width

Community
  • 1
  • 1
LKallipo
  • 790
  • 10
  • 18
  • doesn't it play in the jsfiddle? I just tried it to the one you provide and I can see the colors change when I resize the window – LKallipo Mar 28 '13 at 13:38
  • I tried with resize also its not happening for me.. This two style inside the media queries ( #headingTxt, .descriptionTxt).. – SPN Mar 28 '13 at 13:56