Footer menu on mobile view (Dawn Theme)

Store Design
, , ,
1

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:

IMG_5316.jpeg
IMG_5316.jpeg1179×2556 120 KB

IMG_5317.jpeg
IMG_5317.jpeg1179×2556 81.3 KB

Desired result:

IMG_5318.jpeg
IMG_5318.jpeg1179×2556 168 KB

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!

2

@bellevo

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

step.png
step.png1865×854 125 KB

  • 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.
3

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

4

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

Screenshot 2024-06-28 181548.png
Screenshot 2024-06-28 181548.png462×110 24.3 KB

5

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

@bellevo you can check it again.