Prestige Theme: Rearranging Footer Menus on Mobile View

Store Design
1

Hello,

I am currently using the Prestige theme.

I have edited my footer and my footer menus a certain way and it looks good on desktop view.

Here it is:

Untitledfooter.png
Untitledfooter.png1902×898 42.8 KB

However, on mobile it does NOT look like that. Instead, the menus are all stacked up.

Here is the mobile view:

Untitledfooter2.png
Untitledfooter2.png417×769 35.8 KB

I want the menus to be aligned just like how it is on the Desktop view.

Here is a rough example of what I mean:

Untitledfooter3.png
Untitledfooter3.png416×772 39.1 KB

What can I do to fix this issue?

If needed, my store is www.guapstar.com

PW is: gstar00 (upper right hand corner)

Any response will be appreciated, Thank you very much!

2

Hi @emjayp ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css->paste below code at the bottom of the file:
@media (max-width: 640px) {
    #shopify-section-footer .Footer__Inner {
        display: flex;
        flex-wrap: wrap;
    }
    #shopify-section-footer .Footer__Inner .Footer__Block {
        width: 33%;
    }
    #shopify-section-footer .Footer__Inner .Footer__Block:not(.Footer__Block--newsletter) {
        margin-top: 0;
    }
    #shopify-section-footer .Footer__Inner .Footer__Block.Footer__Block--newsletter {
        width: 100%;
    }
}

I hope it would help you.

3 
@media only screen and (max-width: 600px) {
    #shopify-section-footer .Footer__Inner {
        display: flex !Important;
        flex-wrap: wrap!Important;
    }
    #shopify-section-footer .Footer__Inner .Footer__Block {
        width: 33% !Important;
    }
    #shopify-section-footer .Footer__Inner .Footer__Block:not(.Footer__Block--newsletter) {
        margin-top: 0 !Important;
    }
    #shopify-section-footer .Footer__Inner .Footer__Block.Footer__Block--newsletter {
        width: 100% !Important;
    }
}

@emjayp
Kindly follow this steps:

  1. Navigate to Online Store->Theme->Edit code
  2. Asset->/theme.css or base.css or theme.scss->paste Above code at the bottom of the file.
  3. Save it.
4

Thank you, Avada!

5

This code is not working on my site? Please can you assist.