Solved

How to make footer two columns in prestiger

SamaraShuter
Tourist
10 0 3

Right now my footer is just one long scroll. How do I make it two columns? 

Screenshot 2024-05-27 at 3.28.58 PM.png

 

 

I am using Prestige theme

 

https://shuter.club/ 

rosterclub

 

thank you 

Accepted Solutions (2)

BSSCommerce-HDL
Shopify Expert
680 214 229

This is an accepted solution.

Hi @SamaraShuter

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

BSSTechVenture_0-1716839810244.png

 

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

BSSTechVenture_1-1716839816155.png

Step 3: Insert the below code at the bottom of the file -> Save 

@media only screen and (max-width: 767px) {
   .Footer__Content.Rte h6 {
     font-size: 12px;
     margin-right: 33px;
   }
   
   .Footer__Inner {
    display: flex;
    flex-wrap: wrap;
   }
}

Here is result: 

BSSTechVenture_2-1716839891657.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you  😍

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

BSSCommerce-HDL
Shopify Expert
680 214 229

This is an accepted solution.

Hi @SamaraShuter, Pls replace my old code to this new code: 

@media only screen and (max-width: 767px) {
   .Footer__Content.Rte p {
     font-size: 12px !important;
     margin-right: 35px !important;
   }
   
   .Footer__Inner {
    display: flex;
    flex-wrap: wrap;
   }
   
   .Footer__Aside {
    width: 100vw !important;
    text-align: center;
   }
}

Here is result: 

BSSTechVenture_0-1716842117516.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

Replies 8 (8)

BSSCommerce-HDL
Shopify Expert
680 214 229

This is an accepted solution.

Hi @SamaraShuter

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

BSSTechVenture_0-1716839810244.png

 

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

BSSTechVenture_1-1716839816155.png

Step 3: Insert the below code at the bottom of the file -> Save 

@media only screen and (max-width: 767px) {
   .Footer__Content.Rte h6 {
     font-size: 12px;
     margin-right: 33px;
   }
   
   .Footer__Inner {
    display: flex;
    flex-wrap: wrap;
   }
}

Here is result: 

BSSTechVenture_2-1716839891657.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you  😍

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

SamaraShuter
Tourist
10 0 3

Thank you for getting back to me so quickly! 

 

Unfortunately it did not work. 

BSSCommerce-HDL
Shopify Expert
680 214 229

Hi @SamaraShuter,

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Inside tag head. You need create style tags. After you'll insert my code inside it

BSSTechVenture_0-1716841102390.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

SamaraShuter
Tourist
10 0 3

That worked great thank you! 

 

Now the two sections are very close together (see image below). Is there a way to make them further apart and then centre the logo & copyright? 

Screenshot 2024-05-27 at 4.22.44 PM.png

BSSCommerce-HDL
Shopify Expert
680 214 229

This is an accepted solution.

Hi @SamaraShuter, Pls replace my old code to this new code: 

@media only screen and (max-width: 767px) {
   .Footer__Content.Rte p {
     font-size: 12px !important;
     margin-right: 35px !important;
   }
   
   .Footer__Inner {
    display: flex;
    flex-wrap: wrap;
   }
   
   .Footer__Aside {
    width: 100vw !important;
    text-align: center;
   }
}

Here is result: 

BSSTechVenture_0-1716842117516.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

SamaraShuter
Tourist
10 0 3

This is great, thank you!

BSSCommerce-HDL
Shopify Expert
680 214 229

Hi @SamaraShuter,
We're happy to see that our suggestion helped you solve the issue.

Should you need any further information, please do not hesitate to contact us by tagging directly at Community post. We will check and let you know soon. Thanks in advance 😍.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

Made4uo-Ribe
Shopify Partner
6381 1531 1901

Hi @SamaraShuter 

You can also check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

@media only screen and (min-width: 350px) and (max-width: 749px) {
.Footer__Inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    grid-template-rows: repeat(2, 1fr); 
    column-gap: 10px;
}
.Footer__Aside {
    grid-area: 2/1;
}
    }

 

And Save. 

Result:

Made4uoRibe_0-1716841412076.png

Note: for the more smaller screen 350px size it will back to 1column.

Made4uoRibe_1-1716841451852.png

It wont be user friendly. It if stays in 2 columns

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.