Reorganize Footer Elements For Mobile View

Site URL: https://www.shrgeneralcontracting.com

Hello, I am attempting to reorganize the footer so that on mobile the elements are organized in an in-line format on mobile.

How it is on desktop: I have the social media buttons at the bottom left, a few links <a> spaced out in the middle and the logo on the right. Underneath them all I have a copyright <p> tag. Please take a look at the attached image for reference.

How I want it on mobile: I would like either the logo first, followed by the social media buttons, the three <a> links on the same line and finally the copyright beneath that. All elements should be centered. 

If I was simply coding this it would not be that hard but working with the square space interface has thoroughly confused me. Please help!

Hi. It seems you solved. Do you still need help on this?

Hello! I'm needing help with this same issue. This is what the footer currently looks like on my mobile website. 

I'd like for it to have the image logo "Brooke Sause" ordered first with the rest of the content following it and centered only on mobile. Would someone be able to help me with this?

The site URL is www.brookesause.com and the password is brooksause

11 hours ago, beckacruz said:

Hello! I'm needing help with this same issue. This is what the footer currently looks like on my mobile website. 

I'd like for it to have the image logo "Brooke Sause" ordered first with the rest of the content following it and centered only on mobile. Would someone be able to help me with this?

The site URL is www.brookesause.com and the password is brooksause

 

brooksause

Password is incorrect

8 hours ago, tuanphan said:

brooksause

Password is incorrect

My bad! It's brookesause

On 3/22/2022 at 11:57 PM, beckacruz said:

My bad! It's brookesause

Thank you.

To center footer on mobile, add this to Design > Custom CSS

/* Mobile-Footer-Center */
@media screen and (max-width:767px) {
div#page-section-61fc51c1ab986b4510d932c3 * {
    text-align: center !important;
}
}

This worked perfectly, thank you!

Hi @tuanphan! Any suggestion to line this up?

https://plum-ocelot-fakz.squarespace.com/
pass: spine

I tried the below..

/* Mobile footer links */
@media screen and (max-width:767px) {
div#block-bd09f58bfc07aae9ce64 h4 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center important!;
}
div#block-#block-bd09f58bfc07aae9ce64 a + strong {
    display: none;
}
div#block-#block-bd09f58bfc07aae9ce64 a {
    display: block;
    margin-left: 10px;
    margin-right: 10px;
}
}

23 hours ago, jesswp said:

Hi @tuanphan! Any suggestion to line this up?

https://plum-ocelot-fakz.squarespace.com/
pass: spine

I tried the below..

/* Mobile footer links */
@media screen and (max-width:767px) {
div#block-bd09f58bfc07aae9ce64 h4 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center important!;
}
div#block-#block-bd09f58bfc07aae9ce64 a + strong {
    display: none;
}
div#block-#block-bd09f58bfc07aae9ce64 a {
    display: block;
    margin-left: 10px;
    margin-right: 10px;
}
}

It looks like you solved it?

15 hours ago, tuanphan said:

It looks like you solved it?

Hi!

There is still odd spacing on mobile .. probably because I use the "space bar" in between nav items on the desktop site. Is there a way to make it look spaced out on desktop but not spaced out on mobile but have it centered.

On 3/27/2022 at 1:44 AM, jesswp said:

Hi!

There is still odd spacing on mobile .. probably because I use the "space bar" in between nav items on the desktop site. Is there a way to make it look spaced out on desktop but not spaced out on mobile but have it centered.

Hi,

What should it look like?

Hi @tuanphan, is there a way I can reorder my mobile footer content so the copyright text block can go at the bottom of the footer? 

On 5/10/2022 at 12:27 AM, dv_louise_designs said:

Hi @tuanphan, is there a way I can reorder my mobile footer content so the copyright text block can go at the bottom of the footer? 

Please share site url, we can check easier

Hi @tuanphan I'm having the same issue in mobile version of my site: lwyw.co.uk

I would like all elements in the mobile footer section to be lined in one row if possible. 

Many thanks in advance for your help. 

18 hours ago, El1z4b3th said:

Hi @tuanphan I'm having the same issue in mobile version of my site: lwyw.co.uk

I would like all elements in the mobile footer section to be lined in one row if possible. 

Many thanks in advance for your help. 

If same line, the logo will be very small.

How about align left or center all?

Align left would be good - thank you! @tuanphan

19 hours ago, El1z4b3th said:

Align left would be good - thank you! @tuanphan

Add to Design > Custom CSS

/* align left footer */
@media screen and (max-width:767px) {
div#page-section-6233453c23fee21de7f864c5 * {
    text-align: left !important;
}
}

Thanks @tuanphan that worked!