How can I style the footer menu for better mobile view?

Store Design
1

Hi Guys,

I would like to have the following:

1- Add a line, under both Help and Compnay in the footer menu.

I- In mobile view, I would like to have both Help and Company menu in two columns. Currentally, all foother menu coming in one column.

Alliance_0-1671136748086.png
Alliance_0-1671136748086.png436×901 26.3 KB

Thank you,

allianceautoproducts.com

1 Like
2

Hello @Alliance

It’s GemPages support team and glad to support you today.

You can follow these steps:

  1. Go to Online Store → Theme → Edit code
  2. Open your theme.liquid theme file
  3. Paste below code before :

If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team

3

Hi @Alliance ,

1: Go to Assets > theme.scss.liquid and paste this at the bottom of the file:

.site-footer__item-inner--link_list .h4 {
    border-bottom: 1px solid gray !important;
    padding-bottom: 12.5px !important;
}

2: Go to Assets > theme.scss.liquid and paste this at the bottom of the file:

@media only screen and (max-width: 749px) {
  .site-footer__content .site-footer__item:nth-child(1), .site-footer__content .site-footer__item:nth-child(2) {
    width: 50% !important;
    flex: 1 1 50% !important;
}
}

Hope it helps!

4

@Alliance

yes, please add this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.site-footer__item-inner p.h4 {
      border-bottom: 1px solid;
      display: inline-block;
   }
   @media only screen and (max-width: 750px){
      .site-footer__item{
         flex: 1 1 50%;
      }
      .site-footer__item:first-child, .site-footer__item:nth-child(2){
          width: 50%;
      }
   }
5

Hi, Thank you. Can we reduce the gap between menu headers.

Alliance_0-1671192861035.png
Alliance_0-1671192861035.png457×492 18.3 KB

6

Hi @Alliance ,

Please add code:

@media only screen and (max-width: 749px) {
  .site-footer__linklist-item {
    padding: 5px 0 !important;
}
}

Hope it helps!

7

Hello @Alliance

You can follow these steps:

  1. Go to Online Store → Theme → Edit code
  2. Open your theme.liquid theme file
  3. Paste below code before :

Besides, your logo also contains quite a large space, you should re-upload another more suitable logo image

GemPages_0-1671253028985.png
GemPages_0-1671253028985.png1365×623 140 KB

If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team