Full width image card height/padding issue

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

If you want to create split layout (left text - right image with no gap), you can consider using this plugin. (The plugin use 2 sections to achieve, section 1 is text, section 2 is background image)

In your case, add this to Design > Custom CSS

.design-layout-card .intrinsic *, .sqs-block-image .design-layout-card .intrinsic img {
    height: 100% !important;
    top: 0 !important;
}

4 hours ago, tuanphan said:

If you want to create split layout (left text - right image with no gap), you can consider using this plugin. (The plugin use 2 sections to achieve, section 1 is text, section 2 is background image)

In your case, add this to Design > Custom CSS

.design-layout-card .intrinsic *, .sqs-block-image .design-layout-card .intrinsic img {
    height: 100% !important;
    top: 0 !important;
}

 

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.

Use some code similar this, you can adjust screen size & adjust text size

/* Meet Chef Ashley 1101px - 1250px */
@media screen and (min-width:1101px) and (max-width:1250px) {
div#block-e1ae6a8edf9e2765e40a {
	h2 {
    font-size: 30px;
    margin-bottom: 5px;
}
p.sqsrte-small {
    font-size: 15px;
}
}
}
/* Meet Chef Ashley 992px to 1100px */
@media screen and (max-width:1100px) and (min-width:992px) {
div#block-e1ae6a8edf9e2765e40a {
	h2 {
    font-size: 30px;
    margin-bottom: 5px;
}
p.sqsrte-small {
    font-size: 15px;
}
.image-card.sqs-dynamic-text-container {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}
}
}

@tuanphan I used that plugin that you recommended - it is great, thank you! Any idea how to style the newsletter box so it is vertically aligned to the section next to it? (the calendar widget).

https://numbersinboxes.com/for-businesses pw: numbers

On 5/6/2022 at 10:07 PM, JHillArtDesign said:

@tuanphan I used that plugin that you recommended - it is great, thank you! Any idea how to style the newsletter box so it is vertically aligned to the section next to it? (the calendar widget).

https://numbersinboxes.com/for-businesses pw: numbers

You mean align center vertically or make same height?

@tuanphan I mean center vertically. Thanks!

On 5/10/2022 at 5:35 AM, JHillArtDesign said:

@tuanphan I mean center vertically. Thanks!

 

Add to Design > Custom CSS

// align center calendar form //
@media screen and (min-width:768px) {
div#block-yui_3_17_2_1_1651847324624_133003+.row {
    display: flex;
    align-items: center;
}
div#block-yui_3_17_2_1_1650313694282_121672 {
    top: unset !important;
    transform: unset !important;
    left: unset !important;
}}