Styling a list summary block on mobile

Editing to include URL in the actual post: https://marigold-halibut-wbcx.squarespace.com/

site password: tastesandtreks

I've been trying to style a list style summary block on the homepage of my site. For the mobile view, I'd like the elements to be stacked as shown in the first screen shot, but I want the image thumbnail to be the full width (or almost full width) of the window.

Screen shot of desired desktop view shown below as well. I got the desktop to successfully look this way by using a flex box, but the mobile view looked like the below with the small and offset image.

I need to hand off the site to a client so I redid this section and left the mobile layout alone so I'm able to hand something off that's not funky, but would like to be able to go back and add the code needed to get a stacked column layout on mobile.

Can anyone help?

Add to Design > Custom CSS

/* Mobile Homepage Summary */
@media screen and (max-width:767px) {
body.homepage .summary-item {
    display: flex !important;
    flex-direction: column;
    justify-content: center !important;
}
body.homepage .summary-v2-block .summary-thumbnail-outer-container {
    float: none !important;
    width: 100% !important;
    margin-bottom: 20px;
}
body.homepage .sqs-gallery-design-list .sqs-gallery-design-list-slide:not(.no-image) .sqs-gallery-meta-container {
    float: none !important;
    width: 100% !important;
}
}

Hi @tuanphan, thanks so much! We're almost there, but the content isn't centered. Can you identify where there is an override on the center-aligned styling, or where we can add a line of css to get it all to center? Both on desktop and mobile. 

Also, this css is causing all of the summary blocks to format with left alignment on mobile. I tried adding the section ID for just the "Chicken Enchiladas with Salsa Verde" summary block, but it didn't work the way I did it. Can you also advise on how to target just that summary block with this styling? Thank you!

I made a duplicate site to keep testing to css: 

https://cone-aardvark-hsy6.squarespace.com/
password: tastesandtreks

On 6/21/2023 at 3:48 AM, jennifer-solmadestudio said:

Hi @tuanphan, thanks so much! We're almost there, but the content isn't centered. Can you identify where there is an override on the center-aligned styling, or where we can add a line of css to get it all to center? Both on desktop and mobile. 

Also, this css is causing all of the summary blocks to format with left alignment on mobile. I tried adding the section ID for just the "Chicken Enchiladas with Salsa Verde" summary block, but it didn't work the way I did it. Can you also advise on how to target just that summary block with this styling? Thank you!

I made a duplicate site to keep testing to css: 

https://cone-aardvark-hsy6.squarespace.com/
password: tastesandtreks

Use this new code

/* Mobile Homepage Summary */
@media screen and (max-width:767px) {
[data-section-id="6483355b9703866e39c811a2"] {
div#block-8c69031971097357329c {
    justify-content: center !important;
    text-align: center;
}
.summary-content * {
    text-align: center !important;
}
.summary-item {
    display: flex !important;
    flex-direction: column;
    justify-content: center !important;
}
.summary-v2-block .summary-thumbnail-outer-container {
    float: none !important;
    width: 100% !important;
    margin-bottom: 20px;
}
.sqs-gallery-design-list .sqs-gallery-design-list-slide:not(.no-image) .sqs-gallery-meta-container {
    float: none !important;
    width: 100% !important;
}}
}

On 6/8/2023 at 8:40 AM, tuanphan said:

Add to Design > Custom CSS

/* Mobile Homepage Summary */
@media screen and (max-width:767px) {
body.homepage .summary-item {
    display: flex !important;
    flex-direction: column;
    justify-content: center !important;
}
body.homepage .summary-v2-block .summary-thumbnail-outer-container {
    float: none !important;
    width: 100% !important;
    margin-bottom: 20px;
}
body.homepage .sqs-gallery-design-list .sqs-gallery-design-list-slide:not(.no-image) .sqs-gallery-meta-container {
    float: none !important;
    width: 100% !important;
}
}

 

Hi, I used the above and it works great, but I would like to hide the summary block sliding arrows on mobile if possible please. Is there code I can use to do this?

Website: https://www.rupertstreetfilms.com/

On 8/25/2023 at 5:00 PM, ElleR said:

Hi, I used the above and it works great, but I would like to hide the summary block sliding arrows on mobile if possible please. Is there code I can use to do this?

Website: https://www.rupertstreetfilms.com/

Password: Ru93rt_5tr33t!

 

Add this CSS

@media screen and (max-width:767px) {
.sqs-gallery-design-carousel .sqs-gallery-controls {
	display: none !important;
}
}