Solved

Media queries are not working for all devices and orientations.

Posted on 2016-07-28
8
53 Views
Last Modified: 2016-08-23
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
Comment
Question by:weknowjack
8 Comments
 
LVL 6

Expert Comment

by:Mikkel Sandberg
ID: 41733858
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
 
LVL 4

Expert Comment

by:Branislav Borojevic
ID: 41734002
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
 
LVL 21

Expert Comment

by:Kim Walker
ID: 41734100
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
 

Author Comment

by:weknowjack
ID: 41737964
I have tried these recommendations and still have issues.
0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 21

Accepted Solution

by:
Kim Walker earned 500 total points
ID: 41738339
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
 

Author Comment

by:weknowjack
ID: 41763812
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
 
LVL 21

Assisted Solution

by:Kim Walker
Kim Walker earned 500 total points
ID: 41764034
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
 

Author Comment

by:weknowjack
ID: 41767834
Yes, done. Thanks.
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Read about why website design really matters in today's demanding market.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to count occurrences of each item in an array.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now