How to prevent footer images from being stacked vertically on mobile?

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

Hi,

I am building the website for our client and couldn't find a way to keep images in the footer displayed in-line (exactly the same, as on desktop, but smaller).

This is how we would love the footer links to be displayed on mobile - see the attached screenshot below.

At the minute on mobile it looks like this:

I believe all it needs is a custom CSS, could anyone help?

Store password is 'berries' 

Add to Home > Design > Custom CSS

/* Footer logos */
@media screen and (max-width:767px) {
div#page-section-5f1a96d2dbd8da3ed1969133 .span-4 {
    width: 33.33% !important;
    float: left !important;
}
}

Thank you! You are absolute legend!

I have been looking everywhere, but in all the wrong places!

Hi @tuanphan

I am trying to do the same thing but can't seem to get it to work...

Site:

https://www.natalialafourcade.com.mx/es/altruismo

Password:

natalia

Thanks!!

On 2/12/2021 at 2:08 AM, DVG said:

Hi @tuanphan

I am trying to do the same thing but can't seem to get it to work...

Site:

https://www.natalialafourcade.com.mx/es/altruismo

Password:

natalia

Thanks!!

You mean Footer Logos or?

@tuanphan

Yes, would like to have the logos in the same line in mobile as they are on desktop. 

On mobile they get stacked.

Thanks!

On 2/16/2021 at 2:33 AM, DVG said:

@tuanphan

Yes, would like to have the logos in the same line in mobile as they are on desktop. 

On mobile they get stacked.

Thanks!

Add to Design > Custom CSS

/* Footer logos */
@media screen and (max-width:767px) {
div#page-section-601accf9f9bfa56f3f0d8d8f .span-12 .span-2 {
    width: 33.33% !important;
    float: left !important;
}
}

Thank you so much! @tuanphan

Hi @tuanphan is it possible to keep all the information aligned like this in mobile / tablet as well?
I'd really like to restrict the height of the footer too.

https://herring-porpoise-4afc.squarespace.com/
pw: test 

On 3/26/2021 at 3:33 AM, GBD said:

Hi @tuanphan is it possible to keep all the information aligned like this in mobile / tablet as well?
I'd really like to restrict the height of the footer too.

https://herring-porpoise-4afc.squarespace.com/
pw: test 

Hi. You mean make mobile footer layout same as desktop with 3 columns?

Hi @tuanphan

Need your magic. I am trying to achieve the same thing here with the footer logos. 
Need the mobile version to display like desktop and not stack. 

Website: https://groundhog-radish-mr8g.squarespace.com

Password: UNICORN

15 hours ago, claudnicolson said:

Hi @tuanphan

 

Need your magic. I am trying to achieve the same thing here with the footer logos. 
Need the mobile version to display like desktop and not stack. 

Website: https://groundhog-radish-mr8g.squarespace.com

Password: UNICORN

 

 

Incorrect password. Can you check it again?

@tuanphan My bad! has been updated to: BASIL 

:) 

On 7/12/2021 at 6:25 PM, claudnicolson said:

@tuanphan My bad! has been updated to: BASIL 

:) 

 

Add to Design > Custom CSS

/* Mobile footer logos */
@media screen and (max-width:767px) {
div#page-section-60e43adcbead471ded2806e6 .span-2 {
    width: 16.6667% !important;
    float: left !important;
}
}

Having a similar problem, one set of logos in a section appear 3 on one line but in another section I cannot get logos to appear on one line, see 617e813e1da89b17825620b4"]
 

https://turbot-crocodile-l45j.squarespace.com/home

password:generationofwaste

section in question is ID: 617e813e1da89b17825620b4

Code i'm using is:

/* Footer contributor logos */
@media screen and (max-width:767px) {
div#page-section-617e813e1da89b17825620b4 .span-4 {
    width: 33.33%% !important;
    float: left !important;
}
}

On 10/31/2021 at 6:59 PM, ScottieDog said:

Having a similar problem, one set of logos in a section appear 3 on one line but in another section I cannot get logos to appear on one line, see 617e813e1da89b17825620b4"]
 

https://turbot-crocodile-l45j.squarespace.com/home

password:generationofwaste

 

section in question is ID: 617e813e1da89b17825620b4

Code i'm using is:

/* Footer contributor logos */
@media screen and (max-width:767px) {
div#page-section-617e813e1da89b17825620b4 .span-4 {
    width: 33.33%% !important;
    float: left !important;
}
}

Add to Design > Custom CSS

/* Mobile Contributors Logo */
@media screen and (max-width:767px) {
div#page-section-617e813e1da89b17825620b4 .span-3 {
    width: 50% !important;
    float: left !important;
}
}

I'm having a similar problem too. 
The logo's look great on desktop but on mobile they stacked and are really large. 

#as-seen-in 

https://lunchladylou.com.au/ 

Thank you

On 2/25/2022 at 6:46 PM, lindaell said:

I'm having a similar problem too. 
The logo's look great on desktop but on mobile they stacked and are really large. 

#as-seen-in 

https://lunchladylou.com.au/ 

 

Thank you

It looks fine to me

@tuanphan

Also having the same issue with our site, social icons huge and vertically stack on mobile...

https://www.greenparkstation.co.uk/

Would really appreciate any help!

On 2/22/2023 at 7:28 PM, marketingep said:

@tuanphan

Also having the same issue with our site, social icons huge and vertically stack on mobile...

https://www.greenparkstation.co.uk/

Would really appreciate any help!

Add to Design > Custom CSS

/* Mobile Footer Icons */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1574945868334_63299+.row .span-1 {
    width: 20% !important;
    float: left !important;
}
}