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?)
Do you have a demo of the problem so we can see what we are dealing with?
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.
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.
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
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.
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.
That was very helpful: “Resize your window until the layout breaks”. Much thanks.
However, I’d like some help with minimizing the movement of the text on the page upon the resizing.
As I resize the page from small to larger, the line of text moves to the right (and visa versa).
Here’s the css & html in question:
Thanks for your reply.
I just want some guidance on how to minimize a horizontal line of text from shifting to the left/right upon resizing the page. Is there any way to do that?
If you position the text with percentages, or use them for margin or padding (which you seem to be doing), then those positions will change with the size of the screen. So you could change your positions to some fixed size (px or em for example), they will stay the same distance from the edge of the page.
We’d need a little more to go on as that code doesn’t produce any movement as such apart from tracking the elements percentage width.
Be aware that this:
width:100%;
margin:-0.25% 0 0 1.25%;
Will always be too large for its container as it will take up 101.25%. That’s fine if you are hiding the overflow and then animating it back inside but the code you’ve supplied isn’t really enough to give us a good idea of what you want.
