Reduce space in mobile footer by putting collum 1 and 2 next to eachother

Store Design
1

Ok so my sites footer on desktop looks great, but I want to reduce the footer a bit on mobile so it is less scrolling. So basically I want this:

Footer.jpg
Footer.jpg1050×1761 127 KB

(Quick photoshop)

Instead of this:

Screenshot_20210929-205732_Chrome.jpg
Screenshot_20210929-205732_Chrome.jpg1080×2400 144 KB

Is this possible? I hope someone can help me with this! Thanks in advance!

2

@MDKSocks Hi. May I have the website so I can inspect?

1 Like
3

Hi mate! Website is MDKSocks.nl @made4Uo

4

** @MDKSocks **

Hi,

I hope your comfortable with coding. I will try to make it simple. Please duplicate your code prior to this.

  1. In your duplicated code, Click Actions, then Edit code.
  2. Find the Asset folder and open the theme.scss file
  3. Paste the code below at the very bottom of the page
    @media screen and (max-width: 600px){
    #shopify-section-footer > div > footer > div > div.grid > div.box.box-1.box-first.layout-4.menu{
    width: 50% !important;
    }
    #shopify-section-footer > div > footer > div > div.grid > div.box.box-1.box-first.layout-4.menu > ul {
    border-bottom: none !important;
    }
    #shopify-section-footer > div > footer > div > div.grid > div.box.box-2.layout-4.menu {
    width: 50% !important;
    border-bottom: none !important;
    }
    #shopify-section-footer > div > footer > div > div.grid > div.box.box-2.layout-4.menu > ul {
    border-bottom: none !important;
    }
    #shopify-section-footer > div > footer > div > div.grid > div.box.box-3.layout-4.social {
    border-top: 1px solid #bfbfbf;
    }
    }

Let me know if it works

1 Like
5

Wow @made4Uo you absolute god! This is almost perfect allready!! I hope you can help me as well with the last little tweaks?

Footer.jpg
Footer.jpg1080×2400 181 KB

  1. Is it possible to make all gaps the same height as the gaps with the yellow brushes in it? That would make it look way nicer, because now they are all difference sizes
  2. The border line with the blue brushes is not the same size as the one below is that possible?

Thank you so much so far!!! @made4Uo

6

@made4Uo Don’t be confused but I removed the ‘Klantbeoording’ collum on mobile view! But that doesn’t change anything about the questions below tho! I hope you can help me with those! (or someone else reading this)

You are a real hero mate!

7

Hi @MDKSocks ,

Sorry for the delay. I was affected with the shopify down system. Add the code below in our code (code in red). You can change it pixels too. I think 2.5rem is perfect. See the complete code below

  1. In your duplicated code, Click Actions, then Edit code.
  2. Find the Asset folder and open the theme.scss file
  3. Paste the code below at the very bottom of the page
    @media screen and (max-width: 600px){
    #shopify-section-footer > div > footer > div > div.grid > div.box.box-1.box-first.layout-4.menu{
    width: 50% !important;
    }
    #shopify-section-footer > div > footer > div > div.grid > div.box.box-1.box-first.layout-4.menu > ul {
    border-bottom: none !important;
    }
    #shopify-section-footer > div > footer > div > div.grid > div.box.box-2.layout-4.menu {
    width: 50% !important;
    border-bottom: none !important;
    }
    #shopify-section-footer > div > footer > div > div.grid > div.box.box-2.layout-4.menu > ul {
    border-bottom: none !important;
    }
    #shopify-section-footer > div > footer > div > div.grid > div.box.box-3.layout-4.social {
    border-top: 1px solid #bfbfbf;
    }

#shopify-section-footer > div > footer > div > div.grid > div.box.box-3.layout-4.social > h4{
margin-top: 2.5rem;
}
}

Let me know if it works

1 Like
8

Hey @made4Uo

Thanks again mate! It is a little better now but the first border is not the same as the 2nd one still. (See blue lines)

I also would love the green graps be the same height as the red gaps if possible? My OCD demands me that all gaps are same!

If you have the time, I hope you can help me out mate!

9

@MDKSocks

Hi,

I made some changes. Please duplicate your theme prior to this. Can you put the code. I will adjust the margin. Your middle border line is way on the left. I would like to fix it

  1. In your duplicated code, Click Actions, then Edit code.
  2. Find the Asset folder and open the theme.scss file
  3. Paste the code below at the very bottom of the page
    @media screen and (max-width: 600px){
    footer.site-footer .box {
    margin: -5px 0;
    }
    #shopify-section-footer > div > footer > div > div.grid > div.box.box-1.box-first.layout-4.menu{
    width: 50% !important;
    }
    #shopify-section-footer > div > footer > div > div.grid > div.box.box-1.box-first.layout-4.menu > ul {
    border-bottom: none !important;
    }
    footer.site-footer .box>:last-child {
    padding-bottom: 1rem;
    }

#shopify-section-footer > div > footer > div > div.grid > div.box.box-2.layout-4.menu {
width: 50% !important;
border-bottom: none !important;
}
#shopify-section-footer > div > footer > div > div.grid > div.box.box-2.layout-4.menu > ul {
border-bottom: none !important;
}
#shopify-section-footer > div > footer > div > div.grid > div.box.box-3.layout-4.social::before{
content: ‘’;
border-Top: 1px solid #bfbfbf;
}

#shopify-section-footer > div > footer > div > div.grid > div.box.box-3.layout-4.social > h4{
margin-top: 20px !important;
}
.site-footer .grid .box.box-3 .contact-form .input-row {
margin-bottom: 30px !important;
}
}

1 Like
10

Hey @made4Uo

Now there is no line anymore.. :disappointed_face:

And the padding around the line that is still left is not even anymore.

11

This gap needs to be as it was before the last edit please @made4Uo

Screenshot_20210930-210124_Chrome (1).jpg
Screenshot_20210930-210124_Chrome (1).jpg1080×358 16.5 KB

12

Thank you so much @made4Uo

Real hero!!! Now I have a small footer instead of people needing to scroll 2 pages for only the footer!! Thanks!

1 Like