emilyabaker5

Thank you so much @tuanphan - this did work! However, now it just stretches the image to fit the container so it shows up warped on smaller screen sizes (until it hits mobile breakpoint and stacks images). Is there a way to instead make the text size reduce to fit the container as the screen size gets smaller so the image doesn't have to stretch? See example attached.

Site URL: https://hemmahemma.com/ I have used custom CSS to make a handful of full width image cards across my site, and they look fine so far on laptop screen size (1440 x 900) and larger, but on smaller screen sizes the image isn't scaling to match the height of the text on the other side, so there is text overflow and a large gap of of white space under each image (see example attached). They do automatically stack on mobile though, which works fine for my purposes. Can anyone help with this?? The site is built in 7.1 Here is the code I'm currently using for each specific section to make the image cards full width: // Full Width Image Card - Page Section // [data-section-id="61af6c6d9d995e1dda60e2fe"] { overflow-x: hidden !important; overflow-y: hidden !important; .content-wrapper { padding: auto !important; margin: 0px auto; display: contents; } .sqs-layout .sqs-row .sqs-block { padding-bottom: 0px !important; padding-top: 0px !important; }} // Full Width Image Card - Text Padding // .image-card-wrapper .sqs-dynamic-text-container { padding: 40px !important; }