Dividers full width on mobile view in footer menu (Dawn Theme)

Store Design
, , , ,

Topic summary

A user is trying to make footer menu dividers extend full width on mobile view in Shopify’s Dawn theme.

Initial Problem:

  • Dividers not spanning full width on mobile devices
  • Store appears to have conflicting CSS code

Proposed Solution:
A community member provided custom CSS to add to section-footer.css targeting:

  • Footer block heading margins
  • Grid padding adjustments
  • Brand info spacing
  • Media query for screens under 749px width

Current Status:

  • Original poster removed negative margins and added the provided code
  • Solution did not change the divider size as intended
  • Issue remains unresolved

The helper advised against using negative margins and recommended finding existing padding/margin properties to adjust instead. The discussion is ongoing with no working solution yet.

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

Is there a way to make these dividers full width on mobile view? I would appreciate any help with this.

My store url: https://bellevodesign.com

the issue:

IMG_5326.jpeg
IMG_5326.jpeg1179×1193 49.4 KB

1 Like
2

Hi @bellevo

Check this one.

You add a lot of conflict css. :laughing: If you want to reduce the space dont add the minus margin, please. find if there is a padding or margin on the area that you like to reduce space. Im not sure if this will work on your base.css.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the section-footer.css
  4. Then place the code below at the very bottom of the file.
@media only screen and (max-width: 749px){
.grid .footer-block__heading {
    margin-left: 0px;
}
.footer__content-top.page-width {
    padding: 0px;
}
#shopify-section-sections--21762617606488__footer .footer-block__brand-info div.rte > p {
        margin-left: 0px;
        margin-right: 0px;
    }
.footer-block__brand-info .rte {
    margin: 0 15px;
}
.grid .footer-block__heading {
    padding: 1.5rem;
}

.grid .footer-block__heading::after {
    right: 1.5rem !important;
}

.grid .footer-block__heading + .footer-block__details-content {
    margin-left: 1.5rem !important; 
}
}
1 Like
3

Hey, I removed all of the minus margins and added the code but it didn’t change the divider size.