Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • 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.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • 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

Bronze 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:
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
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom