How to change the sizing of the bottom border in the footer?

[chalkdotco]

Hi there. I am trying to change the size of the bottom border so it is the same width as the top border in the footer on my mobile site. Is there any way to do this? Thank you! I am using the Atom theme and my shop URL is chalkdot.co

[Sinclair1]

Chalkdotco,
I totally get wanting the footer borders to match on your mobile site at chalkdot.co it’s those little details that make a big difference! With the Atom theme, we can fix this by adding a tiny bit of custom code to tweak the bottom border size on mobile to match the top. I’ve laid out a super simple step-by-step guide above just a few clicks in Shopify’s theme editor and a quick copy-paste. It’s pretty straightforward, like adjusting a picture frame! But if the code feels a bit tricky or the borders still aren’t lining up just right, I’d be happy to hop in and sort it out for you. Let me know if you’d like a hand getting it perfect!

[CafeDelMar · Accepted solution]

Hey @chalkdotco. 

I'm not sure if this is exactly what you're trying to achieve, but try the following:

1. Navigate to Sales Channels → Online Store → "Customize" button → Theme settings (Gear icon on the left sidebar) → Custom CSS
2. Add the following code:

@media screen and (max-width: 991px) {
  .footer-menu-wrapper .list-footer.w-list-unstyled {
    border-bottom: 32px solid var(--color-black) !important;
  }
}

3. Save (right top corner)
4. Hard refresh the storefront

If done correctly, the result should be like this:

[chalkdotco]

Hi! Thank you so so much. I just had to change the px to 1 to get it to match and its fixed. You are an angel!!!

[CafeDelMar]

Anytime! Glad to help! 🙂

[chalkdotco]

Hi there! I've tried adding the code to the custom CSS section for the footer, but nothing seems to be changing. Am I doing this incorrectly or putting it in the wrong place? I am so sorry, I am completely new to this. 

[ISCO1]

To change the size of the bottom border in the footer of your mobile site to match the width of the top border, you can add custom CSS to your Atom theme. Access your theme editor in Shopify, navigate to the Assets folder, and locate the theme.scss.liquid file. Add the specific CSS code provided in the attached file.