This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Display: none mobile not working

Open 1 reply developerpluginplugin-page-builder
Joseph Brennan
7 years ago · Last reply by Alex S 7 years ago

Hi there im wkring on a site and have several gallerys in the projects page. They look awful on the mobile version and i believe the best and easiest way to deal with the problem is to cull them out then the screen reaches a certain size.

I have tried the following code in both the wordpress additional CSS section and the Site Origin Plugin CSS editor however nothing seems to work.

@media screen and (max-width: 800px)

{
.gallery-1 { display: none; }
}

Has anyone encountered a similar problem?
Any help is much appreciated on this matter.

Thanks All!

Here is a link to the page im working on http://smith-construction.co.uk/

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

1
  1. Alex S Staff 7 years, 9 months ago

    Hi Joseph,

    I can’t seem to see where you added the gallery-1 class. You’ll need to apply this class to the area you wish to hide.
    You can do this by opening the row/widget and heading over to the row/widget styles sidebar. Open the Attributes settings group and set the Row/Widget Class to gallery-1 and save.

    Regardless, I would recommend using:

    @media (max-width: 600px){
	.mobile-hide {
		display: none !important; 
	}
}

    This will require changing your row/widget class to mobile-hide

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread