How can I align menu blocks in the footer using CSS code?

[ahmedabdelfatta]

I would like to align the four menu blocks in the footer by modifying this code that I placed in the section-footer.css file. How can I do? Than you

@media screen and (max-width: 749px) {
.footer__content-top {
padding-left: 15px !important;
padding-right: 10px !important;
}
.footer-block.footer-block–menu {
width: 50% !important;
display: inline-block !important;
vertical-align: top !important;
height: 70px;
}
}

[GemPages]

Hello @ahmedabdelfatta .

It’s the GemPages Support Team and we are glad to assist you today!

Could you please share your store URL ( with the password if your store password is enabled ) then I can see and suggest something for you?

Best regards,
GemPages Support Team

[ahmedabdelfatta]

Hello

The problem is in the mobile version, the store link is here: https://www.ghiblimerchandise.it/

Thank you, kind regards

[BSS-Commerce]

Hi @ahmedabdelfatta

We just checked your website (https://www.ghiblimerchandise.it/) and realized that your site is blocking right click and Inspect element so we can’t check for you.

Can you kindly turn it off so we can check for you. Thanks!

[ahmedabdelfatta]

Hello BSS-Commerce

Thank you for the replay

I disabled the blocking right click and Inspect.

Thank you and kind regads

[BSS-Commerce]

Hi @ahmedabdelfatta

Do you want to center footer blocks on mobile?

• You need to slightly modify the CSS you added to the class: “.footer-block.footer-block–menu” to

/* start bss fix */
@media screen and (max-width: 749px) {
    .footer-block.footer-block--menu {
        vertical-align: top !important;
        display: flex;
        justify-content: center;
        width: 100%;
        flex-direction: column;
        align-items: center;
    }
}

/* end bss fix */

We hope that it will work for you.

[ahmedabdelfatta]

Hi, nope I want to align the first menu to the second menu in the first line, and the third menu to the fourth menu in the second line. Now it’s not aligned, thank you

[BSS-Commerce]

@ahmedabdelfatta We’re sorry for misunderstanding what you meant to center.

Is this the result you want to change?

• Please modify the CSS as follows:

/* start bss fix */
@media screen and (max-width: 749px) {
    .footer-block.footer-block--menu {
        width: 50% !important;
        display: inline-block !important;
        vertical-align: top !important;
    }

    .footer-block.grid__item {
        padding: 0;
        width: 100%;
    }
}

/* end bss fix */

We hope that it will work for you.

[ahmedabdelfatta]

Hello, i tried to add this code in the bottom of the code in section-footer.css but the problem still remain. the second block it’s not alligned. What’s the reason?

Thank you

[BSS-Commerce]

Hi @ahmedabdelfatta

We changed the CSS code to edit it for you:

You need to paste the following code below using file section-footer.css and save the file:

/* start bss fix */
@media screen and (max-width: 749px) {
    .footer__blocks-wrapper {
        display: flex;
    }
    .footer-block.grid__item {
        padding: 0;
        margin: 0;
        width: 49%;
    }
}

/* end bss fix */