FROM CACHE - en_header

How to reduce spacing in mobile view footer?

Solved
shells
Trailblazer
195 3 97

I would like to left align the logo and the social icons at the bottom and reduce the space that I have highlighted with boxes.

Can anyone please help me with this code?

Thank you!

 

 

mobile footer edits.png

Accepted Solutions (14)

Accepted Solutions
ZestardTech
Shopify Expert
3589 592 832

This is an accepted solution.

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.scss.css and paste this at the bottom of the file:

@media screen and (max-width: 600px){
.site-footer__section img {
margin-bottom: 10px;
margin-left: -40px;
}

.site-footer .site-footer__section-title {
margin-bottom: 20px;
}

.site-footer__section ul.list-inline.social-icons {
margin-left: 0;
}
}
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

View solution in original post

shells
Trailblazer
195 3 97

This is an accepted solution.

@ZestardTech 

Thank you. Your code works well. How about the spaces I highlighted below? I want to reduce the first box more and a bit for the second red box.

Thank you!

shells_0-1624453179575.png

 

 

View solution in original post

Kinjaldavra
Shopify Partner
2302 569 1407

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__section img {
    margin-bottom: 10px !important;
    margin-top: 10px !important;
}
}

 

 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
Build your professional store with GemPage Page Builder

View solution in original post

Kinjaldavra
Shopify Partner
2302 569 1407

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 | Whatsapp
Build your professional store with GemPage Page Builder

View solution in original post

Kinjaldavra
Shopify Partner
2302 569 1407

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 | Whatsapp
Build your professional store with GemPage Page Builder

View solution in original post

Kinjaldavra
Shopify Partner
2302 569 1407

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 | Whatsapp
Build your professional store with GemPage Page Builder

View solution in original post

Kinjaldavra
Shopify Partner
2302 569 1407

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 | Whatsapp
Build your professional store with GemPage Page Builder

View solution in original post

ZestardTech
Shopify Expert
3589 592 832

This is an accepted solution.

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.scss.css and paste this at the bottom of the file:

.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 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

View solution in original post

Kinjaldavra
Shopify Partner
2302 569 1407

This is an accepted solution.

hello @shells 

@media screen and (max-width: 749px){
#footer-payment-methods{
    display: flex;
    justify-content: center;
}
}
Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
Build your professional store with GemPage Page Builder

View solution in original post

ZestardTech
Shopify Expert
3589 592 832

This is an accepted solution.

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.scss.css and paste this at the bottom of the file:

@media screen and (max-width: 749px){
    .site-footer .payment-icons li {
        margin: 0 4px;
    }

    .site-footer .payment-icons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
}
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

View solution in original post

ZestardTech
Shopify Expert
3589 592 832

This is an accepted solution.

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.scss.css and paste this at the bottom of the file:

@media screen and (min-width: 800px){
.site-footer .row.pb-5 {
    padding-bottom: 0 !important;
}

.site-footer .col-lg-2.col-md-4 {
    padding-left: 40px;
}
}
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

View solution in original post

Kinjaldavra
Shopify Partner
2302 569 1407

This is an accepted solution.

@media screen and (min-width: 800px){
.site-footer .row.pb-5 {
    padding-bottom: 0 !important;
}

.site-footer .col-lg-2.col-md-4 {
    padding-left: 40px;
}
}
Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
Build your professional store with GemPage Page Builder

View solution in original post

ZestardTech
Shopify Expert
3589 592 832

This is an accepted solution.

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.scss.css and paste this at the bottom of the file:

 

@media screen and (max-width: 749px){
    .site-footer__section img {
    margin: 0 auto !important;
}
}
.product-single__info-wrapper #nav-tab-info .nav-tabs .nav-item {
    margin: 0 10px;
}

 

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

View solution in original post

Kinjaldavra
Shopify Partner
2302 569 1407

This is an accepted solution.

hello @shells 

@media screen and (max-width: 749px){
.site-footer__section img{
    display: flex;
    margin: 0 auto !important;
}
}
.product-single__info-wrapper #nav-tab-info .nav-tabs .nav-item {
    margin: 0 !important;
}
Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
Build your professional store with GemPage Page Builder

View solution in original post

Replies 35 (35)
ZestardTech
Shopify Expert
3589 592 832

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

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
shells
Trailblazer
195 3 97
dmwwebartisan
Shopify Partner
11014 2377 3400

@shells 

1. In your Shopify Admin go to online store > themes > actions > edit code

2. Find Asset >theme.scss.css and paste this at the bottom of the file

@media only screen and (max-width:749px){
.site-footer .site-footer__section-title {
    margin-bottom: 10px;
}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.
ZestardTech
Shopify Expert
3589 592 832

This is an accepted solution.

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.scss.css and paste this at the bottom of the file:

@media screen and (max-width: 600px){
.site-footer__section img {
margin-bottom: 10px;
margin-left: -40px;
}

.site-footer .site-footer__section-title {
margin-bottom: 20px;
}

.site-footer__section ul.list-inline.social-icons {
margin-left: 0;
}
}
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
Kinjaldavra
Shopify Partner
2302 569 1407

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 .site-footer__section-title {
 margin-bottom: 0  !important;
}
.site-footer .list-inline.social-icons{
        margin-left: 0;
}
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
Build your professional store with GemPage Page Builder
shells
Trailblazer
195 3 97

This is an accepted solution.

@ZestardTech 

Thank you. Your code works well. How about the spaces I highlighted below? I want to reduce the first box more and a bit for the second red box.

Thank you!

shells_0-1624453179575.png

 

 

Kinjaldavra
Shopify Partner
2302 569 1407

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__section img {
    margin-bottom: 10px !important;
    margin-top: 10px !important;
}
}

 

 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
Build your professional store with GemPage Page Builder
shells
Trailblazer
195 3 97

Thank you. That fixed the box under the logo. How about the second red line area? How can I just reduce it by a little bit?

shells_0-1624453662017.png

 

shells
Trailblazer
195 3 97

Also there is a duplication of social icons on mobile view. How can I remove the one circled below?

shells_0-1624453797874.png

 

Kinjaldavra
Shopify Partner
2302 569 1407

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 | Whatsapp
Build your professional store with GemPage Page Builder
shells
Trailblazer
195 3 97

Amazing @Kinjaldavra 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

 

Kinjaldavra
Shopify Partner
2302 569 1407

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 | Whatsapp
Build your professional store with GemPage Page Builder
shells
Trailblazer
195 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

 

Kinjaldavra
Shopify Partner
2302 569 1407

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 | Whatsapp
Build your professional store with GemPage Page Builder
shells
Trailblazer
195 3 97

@Kinjaldavra Hi 

 

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

Kinjaldavra
Shopify Partner
2302 569 1407

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 | Whatsapp
Build your professional store with GemPage Page Builder
ZestardTech
Shopify Expert
3589 592 832

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
shells
Trailblazer
195 3 97

@ZestardTech 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

 

 

Kinjaldavra
Shopify Partner
2302 569 1407

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 | Whatsapp
Build your professional store with GemPage Page Builder