Jump to content

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

Recommended Posts

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.990326203_Screenshot2020-08-05at11_00_23.thumb.png.11cefafa6a7ad0dfc9cdda392a8d429f.png

 

At the minute on mobile it looks like this:

 

664496958_Screenshot2020-08-05at11_01_49.thumb.png.e50082069424d12d004e6d72e3f1e38f.png

 

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

 

Store password is 'berries' 

Edited by eugenesoch
Link to comment

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 6 months later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
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 

Screenshot 2021-03-25 at 20.32.00.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 months later...
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

 

 

Screenshot 2021-07-06 at 15.53.43.png

Screenshot 2021-07-06 at 15.53.53.png

Incorrect password. Can you check it again?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 months later...

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;
}
}

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 months later...
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

image.thumb.png.d1acd054d7828bc4c64d7f606c0cea59.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.