Adding dividers to footer items on mobile layout

[cardboardhouse]

Hello all,

I would like to add a bottom border just on mobile layout, like below - The divider should only stretch the length of the box item, not from the full edge to edge. Would someone be able to help? Thanks a lot!

[Moeed · Accepted solution]

Hey @cardboardhouse 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (max-width: 767px) {
a.text-current.flex.h-full.justify-center.items-center {
    border-bottom: solid 1px black !important;
    padding-bottom: 20px !important;
}
}
</style>

RESULT

If I managed to solve your problem then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[cardboardhouse]

Thanks!! It works

[cardboardhouse]

Moeed, how can I remove border on the last item?

[Prince_dropzon]

Hey! You can do this easily in Shopify without using code.

1. Go to Online Store > Themes, then click Customize on your theme.

2. Switch to mobile view (top toolbar).

3. Click on each of the box items like "Live Chat", "Get in Touch", etc.

4. If your theme supports it, look for a border or divider option in the section settings and enable the bottom border.

5. If it doesn’t, you can:

Add a Divider block between each item (many themes like Dawn support this).

Or insert a thin Spacer block with a background color (like light grey) to mimic a border.

Just make sure the section/container has the right width so the divider doesn’t stretch edge to edge.

Let me know your theme name if you'd need a hand finding the exact steps!

[cardboardhouse]

Thanks but there isn't an option for this 😞 

[BiDeal-Discount]

Hi @cardboardhouse 

let try this css:

@media screen and (max-width: 599px) {
  .shopify-section-group-footer-group ul.slider__grid li:not(:last-child) {
    position: relative;
  }
  .shopify-section-group-footer-group
    ul.slider__grid
    li:not(:last-child):after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: rgb(var(--scrollbar-color, 60 60 60));
  }
}

[cardboardhouse]

Thank you! It also works 😄

[BiDeal-Discount]

yeah. If you don't want the border of last item, you should use my solution 🤗

[cardboardhouse]

Yes, I think it looks better 🙂 

[BiDeal-Discount]

Absolutely 😀

[cardboardhouse]

I'm sorry, I made a mistake, yours actually doesn't show anything 😞 

[BiDeal-Discount]

I think you add wrong at some part.

But nvm, ignore it

[cardboardhouse]

How can I fix it?

[cardboardhouse]

You're right, I didin't add it to the footer.css 😅 - Thanks, I have yours in and working

[BiDeal-Discount]

You're welcome 🤗 Nice to support you

[cardboardhouse]

If you're bored - here 😂😂