Home>Support>Display: none mobile not working

Display: none mobile not working

By Joseph Brennan, 6 years ago. Last reply by Alex S, 6 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. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 6 years, 4 months ago Alex S
    Hi, I Work Here

    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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More