Mobile Footer Custom CSS

Site URL: https://hwh.squarespace.com/

For this website https://hwh.squarespace.com/ password: hwh

How can I make it so the 3 icons in the footer on mobile are all on the same row next to eachother for mobile? Currently there is 2 on the first row and then 1 on the second row. See image attached. Thank you!

Add to Home > Design > Custom CSS

/* footer logos */
@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1601057555302_42529 .slide {
    width: 33.33% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1601057555302_42529 .slide img {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
}
}

Hi @tuanphan! Thank you for your help! Is there any way you could help me with another mobile footer issue? We want the facebook icon and address to be centered just when on mobile. Website here. Password: sca

Thank you!! 🙂

On 12/10/2020 at 3:09 AM, TVB said:

Hi @tuanphan! Thank you for your help! Is there any way you could help me with another mobile footer issue? We want the facebook icon and address to be centered just when on mobile. Website here. Password: sca

Thank you!! 🙂

Add to Home > Design > Custom CSS

/* footer center fb address */
@media screen and (max-width:767px) {
div#page-section-5f92f36cb7b38d5527e0068c .span-9 .span-3 * {
    text-align: center !important;
}
}

I see on tablet, you can change to 2 images/row or resize text size.

Oh great catch! How would I fix that?

On 12/16/2020 at 12:11 AM, TVB said:

Oh great catch! How would I fix that?

Add to Home > Design > Custom CSS

/* tablet 2 images row */
@media screen and (max-width:991px) and (min-width:768px) {
div#page-section-5f96e14a09b3a46869aa5fd6 .span-12>.row>.span-3 {
    width: 50%;
}
div#page-section-5f96e14a09b3a46869aa5fd6 .span-12>.row>.span-6 {
    width: 100%;
}
}