Footer Menu Upper Line and Space on Mobile Mode

[berkeyazer]

Hello Dears,

I need your help to arrange my footer menu in mobile mode as it is in desktop mode.

Below 1st foto is how I want it to look like, there is a line at the top of footer menu and a gap between headers like policies, categories.

However in mobile mode, 2nd and 3rd images show that there is no line and also no gap.

Could you please help me related to it ?

Store link: https://7hills.shop/

password: yellow123456789x

[Darshanp712 · Accepted solution]

Hello @berkeyazer, Please Open Theme -> Edit code -> section-footer.css. make the above CSS changes.

[Darshanp712]

Hello @berkeyazer, Please make changes in your CSS with the code below.

Opem Theme -> Edit code -> section-footer.css. make the below CSS changes.

/* find the below CSS and do the changes below */
.footer-block__heading {
    margin-bottom: 2rem; /* remove or comment this old css */
    margin-bottom: 1rem; /* add this new css */
    margin-top: 0;
    font-size: calc(var(--font-heading-scale) * 1.6rem);
}

@media screen and (max-width: 749px) {
    .footer__content-top {
        padding-bottom: 3rem;
        padding-left: calc(4rem / var(--font-body-scale));
        padding-right: calc(4rem / var(--font-body-scale));
        padding-top: 30px; /* add this CSS to this class with this media query */
    }
   .footer-block__details-content {
       margin-bottom: 4rem; /* remove or comment this old css */
       margin-bottom: 2rem; /* add this new css */
   }
/* find the below CSS and do the changes below */
    .footer-block.grid__item {
        padding: 0;
        margin: 4rem 0; /* remove or comment this old css */
        margin: 2rem 0; /* add this new css */
        width: 100%;
    }
}

@media screen and (max-width: 989px) {
    .footer-block__details-content .list-menu__item--link {
        padding-top: 1rem; /* remove or comment this old css */
        padding-bottom: 1rem; /* remove or comment this old css */
        padding-top: 3px; /* add this new css */
        padding-bottom: 3px; /* add this new css */
    }
}

See the output below.

If I managed to help you then, don't forget to Like it and Mark it as a Solution!
Feel free to reach out if you have any questions or need assistance.

Best regards,

Darshan.

[berkeyazer]

Hello @Darshanp712 thank you for your return, can you explain the exact location where I need to copy the code ?

[Darshanp712 · Accepted solution]

Hello @berkeyazer, Please Open Theme -> Edit code -> section-footer.css. make the above CSS changes.

[berkeyazer]

Hi @Darshanp712 , unfortunately it didnt work correctly, or most probably I did something wrong. It looks like below right now.

There is not that section line above of the '' Policies '', at the top of the footer and the distance between subtitles got bigger.

https://7hills.shop/

password:yellow123456789x

Can you check it and let me know what I did incorrectly here ?

I would be grateful.

[Darshanp712 · Accepted solution]

Hello @berkeyazer, It looks perfect! See the screenshot below.