Setting up a separate footer for mobile or have it centered

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

Hello, 

I set up my footer and it looks great on my desktop site, but it doesn't translate well to the mobile version. Is there a way to create a separate mobile footer, or to make the footer centered on mobile but keep it the way it is on desktop?

On 4/8/2021 at 10:51 PM, MeaghanPM said:

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

Hello, 

I set up my footer and it looks great on my desktop site, but it doesn't translate well to the mobile version. Is there a way to create a separate mobile footer, or to make the footer centered on mobile but keep it the way it is on desktop?

Hi. Add this to Design > Custom CSS

/* center text in footer mobile */
@media screen and (max-width:767px) {
footer.sections * {
    text-align: center !important;
}
}

Hi, I used this code but it didn't fully center the text, so I increased the padding on the right - but now my text blocks are wrapping. Is there a way to prevent this?

On 4/8/2021 at 10:51 PM, MeaghanPM said:

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

Hello, 

I set up my footer and it looks great on my desktop site, but it doesn't translate well to the mobile version. Is there a way to create a separate mobile footer, or to make the footer centered on mobile but keep it the way it is on desktop?

You can add 2 sections in Footer. Then we will check & give the code to show 1 section on desktop, show 1 section on mobile

Hello again! Thank you so much - I added two separate footers and have successfully gotten them to show up where they're supposed to be. However, on the mobile version, I can't get the text entirely centered. Help would be appreciated!

23 hours ago, MeaghanPM said:

Hello again! Thank you so much - I added two separate footers and have successfully gotten them to show up where they're supposed to be. However, on the mobile version, I can't get the text entirely centered. Help would be appreciated!

Remove padding in this code

footer.sections * {
    text-align: center !important;
    padding-right: 15px !important;
}