[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

Media queries are not working for all devices and orientations.

Posted on 2016-07-28
8
Medium Priority
?
87 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
Looking for a new Web Host?

Lunarpages' assortment of hosting products and solutions ensure a perfect fit for anyone looking to get their vision or products to market. Our award winning customer support and 30-day money back guarantee show the pride we take in being the industry's premier MSP.

 

Author Comment

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

Accepted Solution

by:
Kim Walker earned 2000 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 2000 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
The viewer will learn how to count occurrences of each item in an array.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

650 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