Prevent Image Stacking on Mobile

Site URL: http://www.theweepearl.com/recipes

Hi - On my blog page (www.theweepearl.com/recipes, pw: Wee5),  I have four images of cocktail drawings at the top. They are horizontally aligned side-by-side. I'd like to add some code to keep them this way on mobile, I don't want them to be one on top of the other.

Is there a way to group them? These images will be links if that matters.

Thanks,

Corinne

Tried this, to no avail 

/* Blog Top Cocktail Drawings */
@media screen and (max-width:767px) {
div#page-section-616bec01330a29221ec9bf26 .span-2 {
    width: 16.6667% !important;
    float: left !important;
}
}

Did you solve or still need help?

I still need help please 🤓

On 10/21/2021 at 7:21 PM, coriwhat said:

I still need help please 🤓

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1634462872593_2377+.row .span-2 {
    width: 20% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1634462872593_2377+.row .span-2 .image-block {
    width: 80%;
    padding: 10px !important;
}
}

Thank you so much!!! You are a life saver Tuan. Another sort of relevant question: I want to make the homepage's gallery block either be three across, or break to mobile view. I don't like when it's 2 then 1, as shown in attached screenshot. 

(www.theweepearl.com/home, pw: Wee5)

On 10/29/2021 at 7:58 PM, coriwhat said:

Thank you so much!!! You are a life saver Tuan. Another sort of relevant question: I want to make the homepage's gallery block either be three across, or break to mobile view. I don't like when it's 2 then 1, as shown in attached screenshot. 

(www.theweepearl.com/home, pw: Wee5)

 

Add to Design > Custom CSS

/* prevent stack from 768px to 1024px */
@media screen and (max-width:1024px) and (min-width:768px) {
div#block-yui_3_17_2_1_1634483957414_5201 .summary-item {
    width: 31.0345% !important;
    margin-bottom: 3.44828% !important;
    margin-right: 3.44828% !important;
    clear: none !important;
}

div#block-yui_3_17_2_1_1634483957414_5201 .summary-item:last-child {
    margin-right: 0 !important;
}
}

@tuanphan  Are you able to help me figure out how to troubleshoot this scenario? I want images and buttons in a span-6 layout to be prevented from stacking on mobile, but I DO NOT want the text blocks impacted.

Context: the text on desktop has a 3-6-3 layout with spacer blocks in the addtional information section of a product page. (I have several pages like this so I'm desperate to find a solution rather than re-designing a bunch of product pages)

See images below, first is what I want, second is NOT what I want but is happening as a result of this code:

/* Mobile images side by side - prevents stacking */
@media screen and (max-width:767px) {
  .ProductItem .ProductItem-additional .span-6 {
    width: 50% !important;
    float: left !important;
  } }

https://decagon-caribou-s63f.squarespace.com/collection/p/carmanah-table pw blackpanther

You mean you want this text fullwidth on mobile?

@tuanphan yes! Thats correct!

On 6/12/2023 at 3:09 AM, AJeans said:

@tuanphan yes! Thats correct!

Add this CSS (Design > Custom CSS0

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1686161833328_367054+.row .span-6 {
    width: 100% !important;
}
}

8 hours ago, tuanphan said:

Add this CSS (Design > Custom CSS0

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1686161833328_367054+.row .span-6 {
    width: 100% !important;
}
}

 

Thank you! Is there a way to do this to all text boxes in all product pages additonal information section so that I don't have to find the block id or each text box?

On 6/13/2023 at 10:49 PM, AJeans said:

Thank you! Is there a way to do this to all text boxes in all product pages additonal information section so that I don't have to find the block id or each text box?

I think each page will require a different code. Can you share link to all pages where you have problem?