FROM CACHE - en_header
Return management just got easier! We’ve launched Customer Self-Serve Returns to all Shopify merchants. Click here to learn more!

Footer Editing

kj0
Shopify Partner
31 0 4

Hello,

 

I finished designing my homepage but I am having problems with the footer. It is not responsive as the mobile screen gets smaller.

 

It looks like this on desktop,

Screen Shot 2022-05-17 at 1.22.45 PM.png

 

Then on smaller screens, it's like this,

Screen Shot 2022-05-17 at 1.24.17 PM.png

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Here's the link to the preview,

https://vvy60eymsfxh1o5o-44305055895.shopifypreview.com

Replies 5 (5)
oscprofessional
Shopify Partner
13859 2108 2715

@kj0 ,

@media only screen and (max-width: 768px) {
.seven.columns, .nine.columns {
    width: 100%;
    text-align: center;
}
.footer_menu li {
    display: inline-block;
    padding: 7px;
    margin: 0;
}
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->style.scss.liquid

If helpful then Please Like and Accept Solution. Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify App | Custom Pricing Wholesale App | Shopify SEO | Digital Marketing | Shopify Strategies Consultant
kj0
Shopify Partner
31 0 4

Thank you @oscprofessional! It worked!. I just have one concern though. 

 

It is not centered.

Screen Shot 2022-05-17 at 7.05.10 PM.png

oscprofessional
Shopify Partner
13859 2108 2715

@kj0 ,

@media only screen and (max-width: 768px) {
.seven.columns, .nine.columns {
    width: 100%;
    text-align: center;
}
.footer_menu li {
    display: inline-block;
    padding: 7px;
    margin: 0;
}
ul.footer_menu {
    margin: 0;
}
}

please update the code.

If helpful then Please Like and Accept Solution. Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify App | Custom Pricing Wholesale App | Shopify SEO | Digital Marketing | Shopify Strategies Consultant
kj0
Shopify Partner
31 0 4

It worked! Thank you.

 

How about hiding a section for mobile view then another one will appear?

 

Here's the section id I want to hide, 

shopify-section-template--15560919089303__1651929001beae71c0

 

Here's the one I want to appear when the one above is hidden,

shopify-section-template--15560919089303__165271530693be1672

 

Thank you, @oscprofessional 

oscprofessional
Shopify Partner
13859 2108 2715

@kj0 ,

Please share the screenshot

If helpful then Please Like and Accept Solution. Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify App | Custom Pricing Wholesale App | Shopify SEO | Digital Marketing | Shopify Strategies Consultant