Help with responsive design - media queries

A web page I have displays several sliding text messages, which appear successfully on my desltop view, however responsive views, via other devices, required several media queries so that the sizes of the sliding text messages appeared correctly.
Currently, I have these media query breakpoints in css:

@media only screen and (min-device-width : 320px) and (max-device-width : 812px)
{.....
}

@media only screen and (min-device-width : 320px) and (max-device-width : 812px) and (orientation: landscape)
{......
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait)
{....
}
@media only screen
  and (min-device-width: 768px) and (max-device-width: 1024px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape)
{....
}

Also, have this:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

however, viewing through other sized devices, the sliding text is not lining up correctly, wrapping, etc.

And looking at the page via dev tools, makes me think I need media queries for so many devices. (how accurate is looking through dev tools?)

Any suggestions are appreciated.

Do you have a demo of the problem so we can see what we are dealing with? :slight_smile:

If you are needing so many media queries then either your logic is flawed or your design is not suitable for what you are tasking it with. There are literally hundreds of different screen sizes or thousands if you take into account that desktops can be open at any pixel size from 300px to about 5000px +. You can’t write media queries for all of them.

As an aside I would rarely use min and max width media query formats as they are seldom necessary. Use either min or max in a logic order. Also note that device-width is deprecated and you shouldn’t be using it anyway as it has nothing to do with the width available for content. (Device width is the physical width of the device which is why it’s now deprecated.)

Testing for landscape is not really required either because it is just another width. You don’t need to know about landscape or portrait. All you care about is the width available for your design.

Therefore just use min-width or max-width media queries and none of what you posted above is necessary or even desirable.:slight_smile:

However if you can show a demo of the problem or at least something specific we can work out maybe we can up with a better solution. Also remember that most designs are a trade off between what is wanted and what can actually work on a web page so you may have to rethink some things.

Devtools does not emulate any devices at all. It merely draws the design in a box the same size as the device window. You can get the same effect by just opening and closing the browser window on the desktop. (To be honest Devtools does emulate a few things but its main use is showing what your design will look like on that device.)

Remember there are hundreds of devices all at various sizes so you can’t write a media query for every one of them.

Your media queries should be based on the requirements of the design and not some imaginary device. In the simplest form all you are interested in is in 'how much width does this design need". Open your browser’s window as wide as you can and then close it pixel by pixel. If the design breaks at a certain pixel width then that’s where the media query should be inserted. With a few well chosen media queries most designs can be completed. If you find yourself using loads of media queries then that is not a viable approach so stop and rethink the design so that it is more robust.

2 Likes

You can size text based on the vw unit so the text scales up and down without media queries but needs to be done carefully.

1 Like

It’s best to try and use % for more mobile-responsive layouts out of the box.

Pixels are used sometimes for specific reasons but using pixels most of the time will force you to write media queries when you might not have to.

Would be helpful to see what is inside your CSS other than the media queries.

1 Like

Thanks for your reply.
How is this done? :
“Open your browser’s window as wide as you can and then close it pixel by pixel”

  1. Load the page in the browser of your choice. Use your mouse to open the browser window as large as you can on your screen. DO NOT USE THE MAXIMIZE FEATURE
  2. Open your developer tools. Works best if you have it in a new window, or at the very least at the bottom of your screen.
  3. When you grab the corner of the browser, a small overlay will show up (probably top right) with the browser window dimensions. Resize your window until the layout breaks. That becomes a media query breakpoint.
2 Likes