Needed to Adjust Footer Layout for Mobile View

Store Design
, , ,
1

I would like to make a change to the footer layout specifically for mobile view. Currently, the “Explore” and “Support” sections appear one below the other, but I’d like them to be displayed side by side, similar to how they appear in the desktop view.

2

Hi,

Hope this will work

  • Go to Your Theme Code and Click Edit code.
  • Find the Footer File (footer.liquid)
  • Wrap the “Explore” and “Support” Sections in a Flexbox
  • Add Custom CSS for Mobile View

CSS example

@media screen and (max-width: 768px) {
  .footer__blocks {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .footer__block {
    width: 48%; /* So they don’t overflow */
    margin-bottom: 10px;
  }
}
3

Hi,

Good morning,

Welcome to the shopify ,

Please share your store URL and if your store is password protected then also provide password too.
Thank you.

4

Can you help me on add flexbox

5

Hello @Adesh1

Please follow the steps below after logging into the Shopify admin:

  • Go to your Shopify Admin panel.

  • Click on Online Store > Themes.

  • Find the live theme and then click Actions > Edit code.

  • Search main.css

  • Insert the provided CSS code at the end of the file and save the changes.

@media only screen and (max-width: 479px)
{
    .section-footer__row .section-footer__row__col.section-footer__menu-block
{
  flex: 0 1 50%;
}
}

Please hit Like and Mark it as a Solution if you find our reply helpful.