• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Help with responsive design - media queries

chrisj

Legendary Coder
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:

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:

ezmartech

Coder
Hello @chrisj,

The above-given code is not very clear to make your website responsive. It would be the best way to post all code so that we can understand and try to fix the error which you are facing.

All the best
Ezmartech
 
Top