• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 103
  • Last Modified:

Media queries are not working for all devices and orientations.

This page: http://abmoving.com/form/ab-moving-quick-quote-mobile.php
is not displaying correctly for all devices. Basically, I want the width to be auto for all devices and orientations except desktop and laptop computers. All phones and tablets. Is there a universal way to do this?
0
weknowjack
Asked:
weknowjack
2 Solutions
 
Mikkel SandbergFront End DeveloperCommented:
Hi weknowjack,
I do not think there is a way to target specific devices using media queries. For example, @media desktop or @media laptop is not a thing. The best way to do this, I think, would be to use a min-width that would cover laptop size and bigger. Something like @media screen and (min-device-width: 1025px), since  a lot of tablets are 1024px and below. There's also the "-webkit-min-device-pixel-ratio" property to account for different devices. You can see more info about this here: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Hopefully that helps some.
0
 
Branislav BorojevicFounderCommented:
This resource can help: http://cssmediaqueries.com/

You can find out what width/height value is for specific devices, and you can also test the media queries on your browser, to see what queries would work on it.

Nowadays, we have too many different devices (screen sizes) that the need for media queries is greater. There is no one-value-fits-all query out there, but the resource that Mikkel posted and this website could put you on a right track.

If you want to target only mobile devices and tablets, focus on the
@media screen and (max-width:1024px)

Open in new window

and smaller values, you will need a number of them to cover the Portrait and Landscape width values globally and have a somewhat the same look and feel on all platforms that you want to focus on.
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
Another thing to watch out for is that some mobile devices mimic desktop devices by creating the electronic window larger than the physical screen size. You can override this in your viewport meta tag by setting the window width equal to the device width.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

Open in new window

1
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
weknowjackAuthor Commented:
I have tried these recommendations and still have issues.
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
You have some contradictions in your media queries. You begin on line 12 of the source code by loading quick-quote-styles-merged.css for all media. However, within that stylesheet there is a media query section for all screens  up to 1024 pixels wide.

Then on line 15, you load quick-quote-styles-mobile.css for all screens between 320 and 1024 pixels wide regardless of orientation. This stylesheet also contains a media query section for screens up to 1024 pixels wide.

Then on line 16, you reload quick-quote-styles-mobile.css for all screens that are portrait orientation regardless of width (including desktop and tablet).

Then on line 17, you reload quick-quote-styles-merged.css for all screens that are landscape orientation regardless of width (including mobile devices).

So for a mobile device in landscape mode, the merged css file will load, followed by the mobile css file, followed by the merged css file again.

These conflicts may be creating havoc with your responsive designs.

Additionally, the HTML validator lists a few significant errors in your HTML as well as a bevy of warnings. The first significant error is the absence of a doctype declaration. This is significant in that the browser must guess which version of HTML to use to render the page. I suggest you insert as the first line of your page the following HTML 5 doctype declaration.
<!DOCTYPE html>

Open in new window

In addition, there are some problems with your HTML comment structure. Use the following as a generate rule for comment syntax.

An HTML comment begins with "<!--", ends with "-->" and does not contain "--" or ">" anywhere in the comment.

The from Google comment content may not be ignored because the parser recognizes two of the three dashes following the word Google as the end of your comment. This means that the commented out link tags may be getting loaded and interfering with your styles.

I suggest you always validate your HTML and eliminate as many errors and warnings as possible.
1
 
weknowjackAuthor Commented:
Kim, things have improved, but we still have a long blank area on mobile devices when scrolling down past the footer of the page. I use an iPad mini and an iPhone 5s. I see the problem on my devices. Others have said they don't see it on the simulators. I do see it using the Chrome simulators. There is no body height setting I can find.
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
The googleleadservices script is generating an empty iframe at the bottom of the page. But in your quick-quote-styles-mobile.css and quick-quote-styles-merged.css stylesheets, all iframes are set to 880 pixels tall. Is that style for iframes necessary? Can it be made more specific so it won't apply to this anonymous iframe?
0
 
weknowjackAuthor Commented:
Yes, done. Thanks.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now