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;
}