Can I hide background images

Support
#1

I followed video Better Headers: Creating Full-Screen Multi-Backgrounds I was able to create page. Looks fine on Desktop but cannot figure how to make it mobile friendly. Is there a way to make the background images hidden on mobile. I would like to keep the upper elements that have headlines. I would like to know how to make them look correct on mobile. https://danceswithowls.us/

#2

Hello George,

Thanks for writing in!

Please check out this old thread first:

Using your browser’s Development Tool, you can check the live HTML code and find which CSS selector you need to use or what CSS code has been used to style the page.

Check out this video demonstration:

Best Regards.

#4

div class=“e792-12 x-bar-content” How do I hide this on mobile only

#6

Hello George,

Based on the old thread, you can use this code:

@media (max-width: 767px){
	.page-id-13 #x-section-1 {
		background-image: none !important; 
	}
}

Modify the code above and replace it with your class selector. Therefore, the final code can be like this:

@media (max-width: 767px){
	.e792-12.x-bar-content .x-bg{
		background-image: none !important; 
	}
}

You need to add .x-bg assuming that you have added the background image in the Bar element.

Be advised that custom coding is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Best Regards.

#7

The images are not in a bar at all they were added to a page as the video explained. I understand custom coding is outside of supports scope.
Thank You for your time
George

#8

You are most welcome, George.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.