JasonJFV99 JasonJFV99 - 5 months ago 9
jQuery Question

Mobile Responsive Displays

I am designing a website that's mobile responsive. I am using a unique piece of code that allows me to open multiple hidden ul's but they all scroll to the left.

The problem being on a desktop or laptop it shows the scroll bars thus it if you are new to the site you will know it scrolls. But on mobile websites it doesn't display this scroll bars, thus if you are new to the site on the mobile side you wont know that those items scroll.

I am wondering if there is a way to hide content until it gets to the 800px of width that it would display the text to tell people scroll to the left. Or even if there is a way to give the scroll bars visible left or right buttons that would scroll to the left or right when clicked or taped on the desktop, laptop and mobile sides.

Any advice would be appreciated.

Thanks

Answer

You can adjust responsive values with css @media tags. For example, you are using normal css class like this:

.YourClass{
    display:block;
 }

And it for your mobile width for max-width:800px, you can use it for your responsive adjustments:

 @media only screen and (max-width: 800px){
   .YourClass{
       display:none;
    }
 }

In this example, if window width is smaller than 800px, browser uses that class which is placed in @media only screen and (max-width: 800px) and hide content. If its higher than 800px, it uses your normal css class and shows content.

You can find usage and various examples at this link.

Comments