Help hiding DIV on mobile devises

[Jorge Muralles]

Good morning folks, and thanks for reading my question.

I have a few Joomla Websites, but the one I am having problem is not.

It is the CSS that is giving me problems.

There is a DIV that contains a menu I want to hide on the mobile version, phone size

Here is the url to the web site

www.newporttimesharesrus.com

I wrote this code

/*****************************/

<div class=”rightnav”>

Then my CSS

@media only screen and (max-width: 480px) {

.rightnav{

    display: none;

    }
}

/*****************************/

The problem is that it never updates on phone version of the website, however, when I test this in the browser, on the computer, it does work.

So when I resize the browser window, using my PC, when it gets to the phone size screen, it does work, it hides the rightnav DIV.

I have tried in my friend’s phones, my phone, etc.

I have deleted all cash and history, nothing seems to work.

Any ideas please?

Thank you

Jorge Muralles

[Ingolme]

You need a  <meta> viewport tag in order for the responsive CSS to work properly.

Details about this can be found here:

https://www.w3schools.com/css/css_rwd_viewport.asp

[Jorge Muralles]

Thank you very much. This made the website much better.

I am sorry, do you think you can help me out.

I show a table with listings for rent on this page:

http://www.newporttimesharesrus.com/html/timeshares for rent.html

It looks good on the desk top but not on the phone

On the phone, the table gets truncated.

Please see attached file if you have a sec.

How could I address this issue so the the whole table is visible on the phone.

Thank you very much

Edited June 15, 2022 by Jorge Muralles

[Ingolme]

Tables have the property that they will never shrink smaller than the content within them. If the content doesn't fit then you will have to remove some of the content or reduce the text size.

Another option is to put the table inside a box with a scrollbar and let the user scroll horizontally on mobile devices.