Remove White space on Mobile & Tablet for Image Card Blocks

Hello 🙂

I am having an issue with white space showing up on Mobile and Tablet views only for Image card blocks. Not sure what CSS to use. 

For  Mobile view, there's a white space above and below the image card block.

For Tablet view, there's white space only under the image side on an image card block that has a lot of text

Mobile View

Tablet view (image card with more text)

Current CSS that is being used for the Image Card Blocks are:

/* Image card layout- full width */
#yt-section-3 .Index-page-content, #testing-image-card-css .Index-page-content{
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  max-width: 100%;
}

/* Image Card layout- title formatting*/
.image-block-card-dynamic-font-sizing .sqs-block-image .design-layout-card .image-title p {
   font-family: 'Chapaza';
   line-height: 1em;
}

/* Image Card layout- subtitle formatting*/
.image-block-card-dynamic-font-sizing .sqs-block-image .design-layout-card .image-subtitle p {
    font-family: 'Montserrat';
    line-height: 1.5em;
}

Thank you in advance for your help! 

Hi,

Can you share link to page where you use image card block, we can check easier

The tester page is:  https://www.naturalinjector.com/test-youtube 

The card blocks URL Slugs are: house-calls-card-tester and youtube-card-tester 

I have gone into Website > Design > Site Styles > Image Block: Card  to set card separation to 0% and font colors. Font families ('Chapaza' and  'Montserrat') were added via code by the original designer.

/house-calls-card-tester- 

• On the desktop view, there is white space only below the image. Is there a specific size the image needs to be, or is there CSS to have the image fill in the space regardless of how much text is added?
• On Mobile and Tablet view, there is white space above and below the Image Block Card section

/youtube-card-tester - 

• On Mobile and Tablet view, there is white space above and below the Image Block Card section

On 1/10/2024 at 4:41 AM, GMH said:

The tester page is:  https://www.naturalinjector.com/test-youtube 

The card blocks URL Slugs are: house-calls-card-tester and youtube-card-tester 

I have gone into Website > Design > Site Styles > Image Block: Card  to set card separation to 0% and font colors. Font families ('Chapaza' and  'Montserrat') were added via code by the original designer.

 

/house-calls-card-tester- 

• On the desktop view, there is white space only below the image. Is there a specific size the image needs to be, or is there CSS to have the image fill in the space regardless of how much text is added?
• On Mobile and Tablet view, there is white space above and below the Image Block Card section

/youtube-card-tester - 

• On Mobile and Tablet view, there is white space above and below the Image Block Card section

 

#1. first link, can you check image?

#2. https://www.naturalinjector.com/youtube-card-tester

Page doesn't work