[Valerie MParticipant]

I’m working on the website http://yogasportsperformanceinstitute.com/. And I have added background images to three columns under the section for “YSPI Instructor Certification.” The section background image is responsive, as it should be, thank you! The column background images do not have this same responsiveness, how can I make them responsive? Is there an id that I can attribute to them for the responsiveness or do I need to make each one responsive with some CSS? Please let me know, thank you.

[FriechModerator]

Hi There,

Thank you for writing in! You can use the section’s ID where those columns are to target them with CSS.

.home #x-section-4 .x-column.x-1-3 {
	background-size: 100% 100% !important;
}

Add that on your custom CSS on Customizer.

Cheers!

[Valerie MParticipant]

Thanks! That worked for the most part, it’s just that the aspect ratios of the images are not proportionate or fixed when changing screen size.

[ChristianModerator]

It’s not possible to maintain the aspect ratio for the background as it’s set to cover. If you have important information in your image, please use the Image element.

Thanks.

[Author]

Posts