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

"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"

how would you write the CSS code to allow this?

On 2/27/2024 at 12:21 AM, tylerarndt said:

"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"

 

how would you write the CSS code to allow this?

Suppose you have 2 sections in Footer.

To hide Second section on desktop, use this CSS code

/* desktop */
@media screen and (min-width:992px) {
  footer.sections section:nth-child(2) {
  display: none !important;
}}

To hide First section on mobile, use this code

/* Mobile */
@media screen and (max-width:991px) {
  footer.sections section:nth-child(1) {
  display: none !important;
}}