Hide Black Background from Canvas Slider when Viewing on Mobile

When viewing the business slider on a mobile device, the background for the content becomes this giant black bar. Here’s how to hide that.

If you have slider text (titles and/or excerpts), I suppose this isn’t an issue. But I often use the business slider with no titles and excerpt and it’s not an issue when viewing on a larger screen, but when viewing mobile, it transforms into this ugly black box that I don’t want. Here’s the code to make the black background transparent.

@media only screen and (max-width: 767px) {
	/* Change content background to transparent when mobile view */
	#loopedSlider .content {
		background: transparent !important;
	}
}

That first line of code (and the last closing bracket) is saying to only make this happen on smaller screens. Then we’re just making the background of the content area transparent. You could also choose to hide the whole content area if you’d prefer. Here’s the code for that:

@media only screen and (max-width: 767px) {
	/* Change content background to transparent when mobile view */
	#loopedSlider .content {
		display:none !important;
	}
}

Maybe this second one will lessen the padding for what’s below.

There’s that black bar. Looks especially bad with no content.

If there’s no title or excerpt, let’s hide that black background when on mobile device.