Jump to content

Full width image card height/padding issue

Recommended Posts

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

Screenshot 2022-01-24 160647.jpg

Link to comment
  • Replies 7
  • Views 2.1k
  • Created
  • Last Reply

Top Posters In This Topic

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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.

Screenshot 2022-01-25 090843.jpg

Link to comment

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 months later...
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

float.png

You mean align center vertically or make same height?

 

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.