How to reduce spacing in mobile view footer?

Solved
Natztech
Shopify Partner
1319 362 900

This is an accepted solution.

hello @shells 


please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

 

@media screen and (max-width: 800px){ 
.list-inline.social-icons.text-center.text-md-left{
        display: none;
}
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
shells
Excursionist
193 3 97

Amazing @Natztech THankyou

Now that the extra socials are on there is a big gap like below. How can i reduce the area I highlighted in red please?

shells_0-1624454170934.png

 

0 Likes
Natztech
Shopify Partner
1319 362 900

This is an accepted solution.

hello @shells 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

 

@media screen and (max-width: 800px){
.site-footer .row.pb-5{
padding-bottom: 0   !important;
}
.site-footer__copyright{
padding-top: 0 !important;
}
.site-footer__section.section-footer-email{
    padding-bottom :0 !important
}
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
shells
Excursionist
193 3 97

That works. Amazing. Thank you

 

Just realised that I didn't see there is a huge space above the logo too......sorry for the trouble but can you provide me the code for that too please?

shells_1-1624454821491.png

 

0 Likes
Natztech
Shopify Partner
1319 362 900

hello @shells 

@media screen and (max-width: 800px){
.site-footer { 
    padding: 10px 0 0  ;
}
}
Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
shells
Excursionist
193 3 97

@Natztech Hi 

 

Thank you so much for this but it's not working. Can you help me check?

0 Likes
Natztech
Shopify Partner
1319 362 900

This is an accepted solution.

hello @shells 

remove last code and insert this code

@media screen and (max-width: 800px){
.site-footer { 
    padding: 10px 0 0 !important ;
}
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
Pallavi
Shopify Expert
2180 354 464

Hello
This issue has been fixed.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
shells
Excursionist
193 3 97

@Pallavi yes just two more things:

How can I ad a bit more space where I‘ve highlighted in red? and how to remove the maestro logo in both desktop and mobile version please?

shells_0-1624509465515.png

 

shells_1-1624509508026.png

 

 

Natztech
Shopify Partner
1319 362 900

This is an accepted solution.

hello @shells 

 

.site-footer #footer-payment-methods li.list-inline-item:nth-child(2){
          display:none !important
}
@media screen and (max-width: 749px){
.site-footer__section {
    padding-bottom: 40px !important;
}
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
0 Likes