Summary Block - List View - Stack on Mobile?

Hi there! I was wondering if any could help me with some code. I'm using a Summary Block in List View near the bottom of this page: https://www.n2gether.co/summit-interview/amylee-westervelt

I have CSS set up so that it looks good on desktops and tablets, but the mobile view doesn't look great. Ideally, I would like it to stack-- so the image for Item #1 and then the title, subtitle, and button, then a small space followed by the image for Item #2, etc. Any advice?

Than you in advance for your help!

Chynna

8 hours ago, chynna said:

Hi there! I was wondering if any could help me with some code. I'm using a Summary Block in List View near the bottom of this page: https://www.n2gether.co/summit-interview/amylee-westervelt

 

I have CSS set up so that it looks good on desktops and tablets, but the mobile view doesn't look great. Ideally, I would like it to stack-- so the image for Item #1 and then the title, subtitle, and button, then a small space followed by the image for Item #2, etc. Any advice?

 

Than you in advance for your help!

Chynna

we can run some css with media query on mobile view, as follow

@media only screen and (max-width: 767px) {
  section[data-section-id="6692b0205c01bc45e0cc4353"]  .sqs-block-summary-v2 .summary-block-setting-design-list .summary-item {
    flex-direction: column;
    align-items: center;
    margin-bottom: 25px !important;
  }
}

My test

Let me know how it works on your site

@media only screen and (max-width: 767px) {
#block-yui_3_17_2_1_1720888829883_53896 .summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
} }

try this one as well

On 7/13/2024 at 10:52 PM, HoaLT said:

@media only screen and (max-width: 767px) {
  section[data-section-id="6692b0205c01bc45e0cc4353"]  .sqs-block-summary-v2 .summary-block-setting-design-list .summary-item {
    flex-direction: column;
    align-items: center;
    margin-bottom: 25px !important;
  }
}

Thank you! This worked for us. If I may, I have a three follow up questions for this:

- I have multiple pages that I need to use this code with. Can I just add a comma after the section ID and paste another section ID?

- Am I able to add more space between the image and title in the mobile view only with this code?

- Also, on the mobile view, can I remove some of the space between the title and description?

Thank you again for your help!

22 hours ago, chynna said:

Thank you! This worked for us. If I may, I have a three follow up questions for this:

- I have multiple pages that I need to use this code with. Can I just add a comma after the section ID and paste another section ID?

- Am I able to add more space between the image and title in the mobile view only with this code?

- Also, on the mobile view, can I remove some of the space between the title and description?

Thank you again for your help!

- I have multiple pages that I need to use this code with. Can I just add a comma after the section ID and paste another section ID?

@media only screen and (max-width: 767px) {
  section[data-section-id="6692b0205c01bc45e0cc4353"]  .sqs-block-summary-v2 .summary-block-setting-design-list .summary-item,
  section[data-section-id="6692b0205c01bc45e0ccxxx"]  .sqs-block-summary-v2 .summary-block-setting-design-list .summary-item	
{
    flex-direction: column;
    align-items: center;
    margin-bottom: 25px !important;
  }
}

Find the extension Squarespace Finder ID to get the section ID

Update the new code for 2 remaining points

@media only screen and (max-width: 767px) {
  section[data-section-id="6692b0205c01bc45e0cc4353"]  .sqs-block-summary-v2 .summary-block-setting-design-list .summary-item {
    flex-direction: column;
    align-items: center;
    margin-bottom: 25px !important;
  }
  section[data-section-id="6692b0205c01bc45e0cc4353"]  .summary-thumbnail-outer-container {
    margin-bottom: 2px
  }
  section[data-section-id="6692b0205c01bc45e0cc4353"] .summary-excerpt h4 {
    margin-top: 0;
  }
}

Hope it can help