I wanna close a gap in the mobile footer of my theme

[MDKSocks]

Hey! I am running the District theme and on mobile I feel like the gap above the footer in the gray area is a bit to big. I would love to move the complete footer text up so there is less of a gray gap. (Only in mobile)

Anyone has any ideas on how to do this? (See screenshot)

[Kinjaldavra · Accepted solution]

hello @MDKSocks 

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){
footer.site-footer {
    padding: 0 20px !important;
}
}

[LitExtension · Accepted solution]

Hi @MDKSocks, 

Please follow the steps:

- Step 1: Go to Online store > Themes > Actions > Edit code.

- Step 2: Go to Assets > theme.scss.liquid and paste this at the bottom of the file:

@media screen and (max-width: 800px){

        footer.site-footer {

                padding-top: 0px !important;

        }

}

[Kinjaldavra · Accepted solution]

hello @MDKSocks 

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

@media only screen and (max-width:749px){
#shopify-section-1610031492f82d8054 .simple-collection.layout-12{
	padding-bottom: 0;
}
}

[ZestardTech]

Hello There,

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

[MDKSocks]

My store is mdksocks.nl. But I can't just spread my password here, I hope we can come to another solution! I don't want people to break into my store and delete products and stuff

[LamQSolutions]

Hi,

Maybe you can create a preview link to show your store https://www.youtube.com/watch?v=3O1GFNxBIWA

[Kinjaldavra · Accepted solution]

hello @MDKSocks 

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){
footer.site-footer {
    padding: 0 20px !important;
}
}

[LitExtension · Accepted solution]

Hi @MDKSocks, 

Please follow the steps:

- Step 1: Go to Online store > Themes > Actions > Edit code.

- Step 2: Go to Assets > theme.scss.liquid and paste this at the bottom of the file:

@media screen and (max-width: 800px){

        footer.site-footer {

                padding-top: 0px !important;

        }

}

[MDKSocks]

Thank you so much! Last two both worked!

[diego_ezfy]

@MDKSocks 

If the issue is resolved kindly click on "Accept as Solution" below the answer(s) which helped you. 

Kind regards,
Diego

[MDKSocks]

Now I have you here, can someone help me to close the gap above the gray area on the footer as well? Not really the most important thing in the world but I feel like it looks off. 

I would love to have the gap in the grey are and above the grey area (see orange lines on screenshot) to be the same so it looks better.

Again this is only on mobile. 

Thanks in advance!

[Kinjaldavra · Accepted solution]

hello @MDKSocks 

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

@media only screen and (max-width:749px){
#shopify-section-1610031492f82d8054 .simple-collection.layout-12{
	padding-bottom: 0;
}
}

[MDKSocks]

This worked like a charm!! (sorry for the late response)

Now we are at it I actually have one more that probably should work the same I guess:

If someone has a code for that too I would be so happy! I feel like the mobile version of my website is full of unneeded gaps that are just ugly.

You guys are the best!

[Kinjaldavra · Accepted solution]

hello @MDKSocks 

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: 789px){
#shopify-section-1594995557443 .gallery.section-standard  .contain-site-width {
  padding: 0 !important;
}
}

[MDKSocks]

You are an absolute hero! It all seems so simple if you know what you are doing! The mobile version of my site now looks way better without the gaps!

[MDKSocks]

I have to come back to this one more time tho. We made the mobile version of the homepage way better. But on every other part of the website the gap above the grey part from the footer still exists. The footer itself is still good but there is still a white gap above it.

Is there an easy fix for that? I am a perfectionist and want everything to be the same. The desktop version looks great without adjustments. If you have to manual change that for every possible page then it is undoable but maybe it can be done with one single line like the ones before?

Thanks in advance! @Kinjaldavra 

[Kinjaldavra]

hello @MDKSocks 

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

footer.site-footer {
    padding: 0 40px  !important ;
}
header.site-header {
    padding: 0 20px !important ;
  }

[MDKSocks]

Hello @Kinjaldavra 

I am a bit confused as this also changes stuff to the header and also on desktop version and not the mobile version.

I am only talking about the footer thing on all pages.

[MDKSocks]

This gap but then on all the other pages as well. It is fixed on mobile homepage, but not on all other pages

[LitExtension]

Hi @MDKSocks, 

It's our pleasure when seeing it works.

If you find our comments are useful, feel free to Accept as a Solution or Hit Like for them. It absolutely encourages us so much. 

Once again, if you need further support, just let me know. I and my team will try our best to help you fix that. 

Greetings,  LitExtension Team 

[MDKSocks]

I did thanks!

[afif09]

Can you share your store url.? Let me look in.

[MDKSocks]

My store url: www.mdksocks.nl. Thanks in advance!