Help with border around custom footer

Shopify Discussion

Topic summary

A Shopify store owner is experiencing an unwanted border around their custom footer section and wants the footer’s background color (#ffdfdf) to extend fully across the page.

Technical Details:

  • Custom liquid code includes CSS styling with width: 100vw and background color settings
  • Despite using viewport width and !important declarations, a visible border persists around the footer
  • An attached screenshot shows the current appearance of the issue

Current Status:

  • The discussion remains open with one response
  • A commenter has requested the store URL and password to diagnose the exact cause
  • No solution has been provided yet

The issue likely stems from theme-level CSS conflicts or container constraints that override the custom footer styling.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Can someone help if possible please?

I have this custom liquid code for a footer on my store, I cant understand why there is a border around the footer I want it fully extended in the colour of the footer, please see attached image of store and code below.

/* Reset any default margins and paddings */ html, body { margin: 0; padding: 0; } /* Custom Footer Styling */ .custom-footer { background-color: #ffdfdf !important; /* Ensure uniform background */ width: 100vw; /* Ensure full viewport width */ padding: 25px 0; text-align: center; font-size: 12px; font-family: Montserrat, sans-serif; position: relative; } /* Ensure no extra gaps around footer */ .custom-footer::before, .custom-footer::after { content: ""; display: block; width: 100%; background-color: #ffdfdf; } /* Footer container adjustments */ .custom-footer .footer-container { display: flex; justify-content: space-between; flex-wrap: wrap; max-width: 1000px; margin: 0 auto; } /* Footer columns */ .custom-footer .footer-column { flex: 1; min-width: 150px; text-align: center; } /* Footer headings */ .custom-footer h4 { font-size: 14px; font-weight: 600; margin-bottom: 8px; text-transform: uppercase; } /* Footer list styling */ .custom-footer ul { list-style: none; padding: 0; margin: 0; } .custom-footer ul li { margin-bottom: 4px; } .custom-footer ul li a { text-decoration: none; color: black; font-weight: 400; font-size: 12px; text-transform: uppercase; } .custom-footer ul li a:hover { text-decoration: underline; } /* Footer bottom section */ .custom-footer .footer-bottom { margin-top: 15px; border-top: none !important; /* Remove border */ padding-top: 8px; font-size: 11px; color: black; text-transform: uppercase; }

MITCHELL & WEBB COMPANY

© {{ 'now' | date: "%Y" }} MITCHELL & WEBB COMPANY. ALL RIGHTS RESERVED.

![Screen Shot 2025-01-31 at 11.23.38.png|1436x947](upload://8IAfeSiy4LIfVfEZ3dusdP6S8OB.jpeg)
2

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

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.