Footer menu on mobile view (Dawn Theme)

[bellevo]

Hey, is there a way to fix the footer menu on mobile view. I will add a picture below of the desired result. I would appreciate any help with this!

The issue: 

Desired result: 

So I would need to have the logo, text and social media icons centered, and having the quick link menus turned in to drop downs only on MOBILE view. Thank you in advance!

[BSS-TekLabs]

@bellevo 

- Here is the solution for you
- Please follow these steps:

- Then find the base.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

 

@media only screen and (max-width: 750px) {
 .footer-block__brand-info .rte {
     margin-bottom: 30px !important;
  }
.footer__content-bottom-wrapper {
    padding: 0 !important;
}
.footer__localization:empty + .footer__column {
padding-left: 0 !important;
    padding-right: 0 !important;
}
.list-payment__item {
 padding: 0.1rem !important;
}
}

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[bellevo]

Hey looks good only change is that is it possible to get the edges of the text even? I will add an example here: 

[namphan]

Hi @bellevo,

This would require a lot of changes to the code, so it's difficult for anyone to guide you.

Do you need to hire a professional for this, or can I send you a collaborator invite?

I will check it for you

[BSS-TekLabs · Accepted solution]

Code update

@media screen and (max-width: 750px) {
 .footer-block__brand-info .rte {
     margin-bottom: 30px !important;
  }
.footer__content-bottom-wrapper {
    padding: 0 !important;
}
.footer__localization:empty + .footer__column {
padding-left: 0 !important;
    padding-right: 0 !important;
}
.list-payment__item {
 padding: 0.1rem !important;
}
  .footer-block__brand-info {
    text-align: center !important;
  }
  .footer-block__brand-info .footer-block__image-wrapper {
        margin-left: auto !important;
        margin-right: auto !important;
  }
  .footer-block__brand-info .footer__list-social.list-social {
        justify-content: center !important;
  }
}

[BSS-TekLabs]

@bellevo  you can check it again.