(Dawn) How to lessen space between multicolumn text

Store Design

Topic summary

Issue: Too much horizontal space between items in Dawn theme’s multicolumn section, even with column-gap: 0 applied. Images and a live store link were provided for reference.

Desktop adjustments:

  • Added CSS targeting the specific multicolumn section to set column-gap: 0 and center content.
  • Adjusted 6-column desktop layout by recalculating grid item widths to tighten spacing.

Mobile (<=749px) iterations via media queries (device-size specific CSS rules):

  • First change set grid items to width: auto to reduce spacing.
  • Remaining right-side gap prompted a second change: set grid items’ min-width to fit-content for the section and hide slider buttons to reclaim space.

How to apply: Edits are made in the theme’s CSS (base.css or custom CSS) via Online Store > Themes > Edit code.

Status/outcome:

  • Spacing improved on mobile after successive CSS tweaks, but a slight right-side gap was still reported before the final code. No confirmation yet on whether the last change fully resolved it. Discussion appears open/awaiting user confirmation.
Summarized with AI on December 22. AI used: gpt-5.
7

Hello! @pikachu1924 Please follow these steps to add this CSS code:

  1. Go to your Online Store
  2. Click on “Themes”
  3. Select “Edit code”
  4. Open your CSS file. If you have a custom CSS file, open that instead.
  5. If you can’t find your custom CSS file, open “base.css”
  6. Add the following code at the end of the file.
@media screen and (max-width: 749px) {
    #shopify-section-template--15459208495159__multicolumn_NkCd3a .multicolumn-list.slider--tablet.grid--peek.grid--1-col-tablet-down .grid__item {
        min-width: fit-content;
    }
}
.multicolumn .slider-mobile-gutter .slider-buttons {
    display: none !important;
}

Rishihuptech_0-1723096345600.png
Rishihuptech_0-1723096345600.png558×720 15.1 KB

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.
Thank you
K.K

1 Like