Image Stack on 'Tablet' Size in 7.1

Site URL: https://shallot-leopard-twxs.squarespace.com/

Hello -

I am seeking a way to stack my image blocks earlier than mobile. When I size my screen down on desktop, two of my sections look wonky with too much space below the image and text not resizing but on mobile version, they look great.

https://shallot-leopard-twxs.squarespace.com/

pw: carden

I do not want them to look like this:

Instead, I want them to auto adjust to look like the mobile version, stacked and images full width

I do have the following CSS to force these two sections full width:

// Full Width Image Card - Page Section //

[data-section-id="607a55e6300cc60f862fb6d4"] {
  overflow-x: hidden !important;
  overflow-y: hidden !important;
    .content-wrapper  {
      padding: 0px !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;
}

// Full Width Image Card - Page Section //

[data-section-id="607d9cfc2ad03b5b77542454"] {
  overflow-x: hidden !important;
  overflow-y: hidden !important;
    .content-wrapper  {
      padding: 0px !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;
}

Thank you!

Kayla

@Agha_WaqasThat worked thank you!

8 hours ago, unavolta said:

@Agha_WaqasThat worked thank you!

@unavoltaYour welcome

Tried the above code and it didn't work as the text alignment was off. but found
the solution to the problem this created  below.

https://www.youtube.com/watch?v=1pH2LmLPFus

@media screen and (max-width: 800px) {
.sqs-block-image .design-layout-card:not(.sqs-narrow-width) {
    display: block!important;
}
.sqs-block-image .design-layout-card:not(.sqs-narrow-width) .image-card-wrapper {
    width: 100%;
    margin-left: 0!important;
}
.sqs-block-image .design-layout-card:not(.sqs-narrow-width)>div:first-child {
    width: 100%;
}
}

Source of code and video ETC 

https://schwartz-edmisten.com/blog/force-an-image-card-to-stack-on-tablet-in-squarespace

Hi! I'm having the same issue as stated by the original poster. However, when I use the CSS above, the text wraps too closely to the bottom of the image in tablet view. Is there any way to add some spacing between the title and image? 

I've attached screenshots of desktop, tablet and mobile view before applying CSS and a screenshot of the tablet view after applying CSS.

Also, my phone (Pixel 6 Pro) displays all Squarespace sites in tablet view, not mobile. I'm thinking the built-in breakpoints on Squarespace are too small for newer phones... anyone else running in to this issue?

On 3/30/2022 at 9:35 PM, chymer said:

Hi! I'm having the same issue as stated by the original poster. However, when I use the CSS above, the text wraps too closely to the bottom of the image in tablet view. Is there any way to add some spacing between the title and image? 

 

I've attached screenshots of desktop, tablet and mobile view before applying CSS and a screenshot of the tablet view after applying CSS.

 

Also, my phone (Pixel 6 Pro) displays all Squarespace sites in tablet view, not mobile. I'm thinking the built-in breakpoints on Squarespace are too small for newer phones... anyone else running in to this issue?

Can you share link to page in screenshot? We can check easier

On 4/1/2022 at 9:31 AM, tuanphan said:

Can you share link to page in screenshot? We can check easier

URL to the page I sourced screenshots from: https://www.memoriesbyabsorb.com/packages-pricing

Thank you for checking on this!

6 hours ago, chymer said:

URL to the page I sourced screenshots from: https://www.memoriesbyabsorb.com/packages-pricing

Thank you for checking on this!

Space is fine on my end

Screenshots attached of https://www.memoriesbyabsorb.com/packages-pricing from my phone, a Pixel 6 Pro. 

Squarespace's breakpoints are reading my phone's screen size as if it was a tablet. When using the code below, the spacing between the text and the image is too small. 
 

@media screen and (max-width: 800px) {
.sqs-block-image .design-layout-card:not(.sqs-narrow-width) {
    display: block!important;
}
.sqs-block-image .design-layout-card:not(.sqs-narrow-width) .image-card-wrapper {
    width: 100%;
    margin-left: 0!important;
}
.sqs-block-image .design-layout-card:not(.sqs-narrow-width)>div:first-child {
    width: 100%;
}
}