Remove slider on mobile, addendum

[Ryan Hennesy]

I just tried to apply the solution from this post, and it did indeed remove the slider, but left a big blank space where the slider used to exist.

I thought, maybe, when I disabled the slider, the Hero Image would show. But, I’d be okay with just having the horizontal menu at the top of the page too.

Thanks,
Ryan

[Bill Robbins]

Hi Ryan,

If you use the slider option the original hero content isn’t loaded onto the page. If you only wanted an image to be there, you could add one this way:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   @media only screen and (max-width: 520px) {
   
   	.home #hero-section {
   		background-image: url(https://yoursite.com/image.jpg);
   		background-size: cover;
   		background-position: center;
   	}
   
   }
   

3. Replace the http://yoursite.com/image.jpg with the URL to the image you’d like to use. You can find the image URL by clicking on an image in the WordPress media library.
4. Update your settings.

That would give you an image to replace the slideshow on screens 520 pixels wide or smaller.

If you’d rather remove the hero area on smaller screens, here’s how to do that:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   @media only screen and (max-width: 520px) {
   
   	.home #hero-section {
   		display: none;
   	}
   	
   	#home-one {
   		margin-top: 100px;
   	}
   
   }
   

3. Update your settings.

That should have you covered either way.

Take care,
Bill

[Ryan Hennesy]

Great! Thanks Bill.

[Bill Robbins]

Anytime Ryan 🙂

[Author]

Posts