troubleshooting Question

Regards: @media queries / stylesheets and Firefox browser on Android tablet (ASUS).

Avatar of Thunderman54
Thunderman54Flag for United States of America asked on
CSSHTMLWeb Development
4 Comments1 Solution64 ViewsLast Modified:
I have a simple webpage that references an external stylesheet. That stylesheet includes media queries (I'll paste below). The page is rendering perfect on my windows notebook and desktop, in Safari on my wife's iPad, in both Chrome and Opera on my Asus tablet. For some reason, however, I can't get it to display properly using Firefox (v. 34) on my tablet (don't have FF on my notebook or desktop, so haven't tested there). In surfing the web, it seems FF has had some issues with media queries. Any help would be greatly appreciated. I've already tried adding "width=device-width" to my meta tag (below), but that did not resolve it. I'll post 2 lines from the head section of the html document, and then the external stylesheet (screens.css) below that.

<meta name="viewport" content="initial-scale=1, maximum-scale=1 user-scalable=no" />
<link rel="stylesheet" type="text/css" href="content/screens.css" />


/* small mobile devices */

@media only screen and (max-device-width:1020px) {

body
{
background-color: #999999;
margin: 0;
}

#vplayer
{
position: relative;
margin-left: 0;
margin-top: 0;
}
}

/* larger devices with 16:10 aspect ratio */

@media screen and (min-device-width: 1021px) and (device-aspect-ratio: 16/10) {

     *  {
                margin: 0;
                padding: 0;
            }
            
            html
            {
                  height: 100%;
                  background-color: #000;
                  background-image: url(bgimages/16_10.jpg);
                  background-attachment: fixed;
                  background-position: top left;
                  background-repeat: no-repeat;
                  background-size: cover;
                  overflow: hidden;
                  -webkit-background-size: cover;
                  -moz-background-size: cover;
            -o-background-size: cover;
             }
            
            body
            {
                  height:100%;
                  overflow: scroll;
                  -webkit-overflow-scrolling: touch;
            }
            
            #bgcurtain
            {
                  clear: left;
                  width: 100%;
                  height:25in;
                  background-color: #000;
                  opacity: 0.8;
                  margin-top: 10in;
                  margin-bottom: 0px;
            }
            
            
            #vplayer  /* The code below is supposed to center (horizontally) a div on any screen size as long as you specify the width of the div */
            {
                  clear: left;
                  margin-top: -16in;
                  margin-right: auto;
                  margin-left: auto;
                  width: 950px;
            }
}


/* larger devices with 16:9 aspect ratio */

@media only screen and (min-device-width: 1021px) and (device-aspect-ratio: 16/9) {

     *  {
                margin: 0;
                padding: 0;
            }
            
            html
            {
                  height: 100%;
                  background-color: #000;
                  background-image: url(bgimages/16_9.jpg);
                  background-attachment: fixed;
                  background-position: top left;
                  background-repeat: no-repeat;
                  background-size: cover;
                  overflow: hidden;
                  -webkit-background-size: cover;
                  -moz-background-size: cover;
            -o-background-size: cover;
             }
            
            body
            {
                  height:100%;
                  overflow: scroll;
                  -webkit-overflow-scrolling: touch;
            }
            
            #bgcurtain
            {
                  clear: left;
                  width: 100%;
                  height:25in;
                  background-color: #000;
                  opacity: 0.8;
                  margin-top: 10in;
                  margin-bottom: 0px;
            }
            
            
            #vplayer  /* The code below is supposed to center (horizontally) a div on any screen size as long as you specify the width of the div */
            {
                  clear: left;
                  margin-top: -16in;
                  margin-right: auto;
                  margin-left: auto;
                  width: 950px;
            }
}


/* larger devices with 4:3 aspect ratio */

@media only screen and (min-device-width: 1021px) and (device-aspect-ratio: 4/3) {

     *  {
                margin: 0;
                padding: 0;
            }
            
            html
            {
                  height: 100%;
                  background-color: #000;
                  background-image: url(bgimages/4_3.jpg);
                  background-attachment: fixed;
                  background-position: top left;
                  background-repeat: no-repeat;
                  background-size: cover;
                  overflow: hidden;
                  -webkit-background-size: cover;
                  -moz-background-size: cover;
            -o-background-size: cover;
             }
            
            body
            {
                  height:100%;
                  overflow: scroll;
                  -webkit-overflow-scrolling: touch;
            }
            
            #bgcurtain
            {
                  clear: left;
                  width: 100%;
                  height:25in;
                  background-color: #000;
                  opacity: 0.8;
                  margin-top: 10in;
                  margin-bottom: 0px;
            }
            
            
            #vplayer  /* The code below is supposed to center (horizontally) a div on any screen size as long as you specify the width of the div */
            {
                  clear: left;
                  margin-top: -16in;
                  margin-right: auto;
                  margin-left: auto;
                  width: 950px;
            }
}
ASKER CERTIFIED SOLUTION
Peter Hart

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 4 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 4 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros