Turn off banner in Mobile mode?

kbevphoto

I have 3 rotating "slideshows" that I'm using as a rotating banner on my site. It makes sense on a big screen (e.g. Computer). on mobile devices, especially phones, it is disorienting because people are seeing the logo + 3 big photos (rotating) and thinking that's the site. In reality, you need ot scrool down past that on every page to get to the galleries.

Is there a way to hide those shows in Mobile Mode and just show the logo?

:scratch

Site: kbevphoto dot com

Hikin' Mike

It annoying on my home computer with a larger monitor too. Anyway, this should remove the 4 slideshows on mobile devices smaller than 799px.

@media only screen and (max-width: 799px) {
	.sm-page-widget-7sz7xtXB,
	.sm-page-widget-5NhDVQr4,
	.sm-page-widget-hfB9hCds,
	.sm-page-widget-xTDVqTmv {
		display: none;
		}
	}

Hikin' Mike

EDIT: Should be this instead:

@media only screen and (max-width: 799px) {
	.sm-page-widget-1011417,
	.sm-page-widget-1011401,
	.sm-page-widget-1011448,
	.sm-page-widget-1011495 {
		display: none;
		}
	}

kbevphoto

wow. That will remove the 4 slideshows and only leave the logo?

Where do I drop that code? Sorry, i'm a bit of a hack, but i'm rusty on top of that...

Hikin' Mike

I put all of my CSS on my theme's site-wide CSS... 'Customize > Custom Site > Entire Site > Theme > Active Theme'. Click on the "Wrench Icon" then 'Edit Theme > Advanced". Scroll down to see the CSS link.

kbevphoto

Worked like a charm. So grateful. The DGrin community is the best.

Thakns

tenebs

Hikin' Mike wrote: »

EDIT: Should be this instead:

@media only screen and (max-width: 799px) {
    .sm-page-widget-1011417,
    .sm-page-widget-1011401,
    .sm-page-widget-1011448,
    .sm-page-widget-1011495 {
        display: none;
        }
    }

Thanks but I found I have to add the .sm-user-ui part to get it to work for me:
/*Hide the mini left slideshow for mobile browsers */
@media only screen and (max-width: 480px) {
.sm-user-ui .sm-page-widget-5615980 { display: none !important; }
}