Jump to content

Change order of Footer Blocks on Mobile

Recommended Posts

On 7/1/2021 at 4:38 AM, brookeleawood said:

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

The password to the site is leawood

For the mobile preview I would like the newsletter block to appear first - is this possible? Thanks so much! 

Add to Design > Custom CSS

/* Mobile footer order */
@media screen and (max-width:767px) {
div#page-section-60cbcf07b9f71b10c7e72b40>.row:nth-child(2) {
& {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
.span-6 {
	order: 1;
}
.span-3 {
	order: 2;
}
}
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 8 months later...
On 3/3/2022 at 4:02 AM, lidyaaC said:

@tuanphan I would really like to do this on the following website https://slapyork.co.uk 

I have tried amending this code a bit but I cant get it to work! 

Which order you want on your site?

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 3/6/2022 at 11:28 PM, HG-Design said:

Hi Tuanphan, 

Sorry, another question!

In the footer on mobile view, is it possible for the newsletter subscribe to appear above the page links rather than right at the bottom where it currently sits?

Yes. If you share site url, we can check easier

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 3/10/2022 at 2:16 PM, HG-Design said:

Hi Tuanphan, it’s waevcharge.co.uk 

Add to Design > Custom CSS

/* Mobile Footer */
@media screen and (max-width:640px) {
div#page-section-62169e91685cc72774a40fa2>.row:nth-child(2) {
    display: flex;
    flex-direction: column-reverse;
}
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.