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:
Also, have this:
however, viewing through other sized devices, the sliding text is not lining up correctly, wrapping, etc.
Any suggestions are appreciated.
Currently, I have these media query breakpoints in css:
CSS:
@media only screen and (min-width : 320px) and (max-width : 812px)
{.....
}
@media only screen and (min-width : 320px) and (max-width : 812px) and (orientation: landscape)
{......
}
@media only screen and (min-width: 768px) and (max-width: 1024px)
and (-webkit-min-pixel-ratio: 2)
and (orientation: portrait)
{....
}
@media only screen
and (min-width: 768px) and (max-width: 1024px)
and (-webkit-min-pixel-ratio: 2)
and (orientation: landscape)
{....
}
Also, have this:
HTML:
<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.
Any suggestions are appreciated.
Last edited: