Stack footer blocks horizontally instead of vertically on mobile

Site URL: http://www.maevaberthelot.com

I built my website with Squarespace 7.1 and on the mobile version the blocks in the footer seem to be automatically stacked vertically (pic 1).
I am trying to get all the blocks in one horizontal line like on the laptop version (pic 2).

Does anyone know how this can be changed?

Thanks in advance!

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-5eb87a46c673416ea88922a8 .span-12>.row {
    display: flex;
}
}

Fantastic. It works!
Thank you so much for your help!

On 6/30/2020 at 5:39 AM, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-5eb87a46c673416ea88922a8 .span-12>.row {
    display: flex;
}
}

 

This is not working, trying to do the same, please help:  Site: mashaborak.com

On 4/10/2022 at 1:52 AM, HunterD said:

This is not working, trying to do the same, please help:  Site: mashaborak.com

It looks like you solved with this code?

@media screen and (max-width: 767px) {
    div#page-section-620bc3a7467d5810649270ad .span-12>.row .col {
        float:left !important;
        width: 50% !important
    }
}

Hi there @tuanphan! Hope you've been well.

I'm trying to make sure two image blocks appear smaller and side by side on mobile. I've tried the code above and I haven't been able to get it to work.

Here's the id: section[data-section-id="627982e1cd3abd7f96fd2596"]
Image blocks read "Contact!" "Donate!"

And the web address: https://www.superheroprojectkids.org/about-us

Thanks for your insight!
-Michael

On 5/10/2022 at 10:01 PM, LisaMichael said:

Hi there @tuanphan! Hope you've been well.

I'm trying to make sure two image blocks appear smaller and side by side on mobile. I've tried the code above and I haven't been able to get it to work.

Here's the id: section[data-section-id="627982e1cd3abd7f96fd2596"]
Image blocks read "Contact!" "Donate!"

And the web address: https://www.superheroprojectkids.org/about-us

Thanks for your insight!
-Michael

Hi. I don't see these sections. Can you take a screenshot?

@tuanphan

Here's the screenshot. I'm trying to make the two blocks in the green section appear side by side.

Thanks,
-M

On 5/18/2022 at 11:00 PM, LisaMichael said:

@tuanphan

Here's the screenshot. I'm trying to make the two blocks in the green section appear side by side.

Thanks,
-M

 

Add to Design > Custom CSS

/* Mobile contact donate side by side */
@media screen and (max-width:767px) {
div#page-section-627982e1cd3abd7f96fd2596 .span-6 .span-3 {
    width: 50% !important;
    float: left !important;
}
}