Solved

Media queries are not working for all devices and orientations.

Posted on 2016-07-28
8
76 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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 22

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
Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

 

Author Comment

by:weknowjack
ID: 41737964
I have tried these recommendations and still have issues.
0
 
LVL 22

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 22

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

Major Incident Management Communications

Major incidents and IT service outages cost companies millions. Often the solution to minimizing damage is automated communication. Find out more in our Major Incident Management Communications infographic.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Increase image taller on inner pages 2 50
Embedd an image or live dashboard into Slack 1 54
isNaN issue on the Table input text 2 41
object method as an event handler 8 75
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

734 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