Find solution
Why won't my @media queries work?

Is there a way to disable media queries on tablet versions of my website?

  • I have done a lot of work with media queries on the mobile version of my site and it looks great. However I haven't had time for the tablet version and it looks horrible. Is there a way to have my site just look normal for tablet view and not use the same viewport that mobile does or something?

  • Answer:

    I assume you also have a desktop version. How did you manage to skip the tablet? Preferably you should design a site from mobile, to tablet and then desktop. If you're converting a site to responsive, it should be the reverse. The tablet sits in the middle. In my opinion save yourself the hassle and make the desktop version available on all devices whilst you work on the tablet version. Then make the site responsive when the site has been designed for all of the devices.

Balraj Chana at Quora Visit the source

Was this solution helpful to you?

Other answers

Adjust your queries so that they only work on phone resolution viewports. That's a bit harder as phone resolutions increase, but combining device pixel ratio and resolution information should let you narrow the scope of your media query so it's not used by tablets.

Rick Gregory

Change your CSS around so that your media queries only apply to devices that are smaller than a certain size. This will fix the problem on the majority of tablets by only using the mobile css when needed. I usually serve mobile css to screens smaller than ~720px wide.   However, there's a lot of overlap between phone and tablet screen sizes nowadays so that solution won't help everybody. I know that you haven't got the time, but targetting larger tablets and computers alongside phones with media queries is the best long term solution, complemented by designing for touch based interfaces.

Thomas Foster

If I were you I would try to use media queries still, and have the mobile version only show for the absolute highest mobile resolution, lower than the tablet resolution.

Daniel Hough

As Rick alluded to, it's a winding road when you start trying to differentiate between a tablet and some phones.  At 5.5" Galaxy Note should get a completely different layout than a 7" tablet?  It's tricky...

Mickey Mellen

That's very simple - make sure you on;y have media queries for small screens. So start your media queries at max width: 550px or similar (or maybe slightly larger), which will cover the iPhone 5 in landscape and other largish smartphones. If your stylesheet has media queries for tablets, either comment them out or move the relevant code to a media query for smaller devices, as you may find some of the content in media queries targetting tablets is useful for smaller devices too.

Rachel McCollin

Related Q & A:

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.