Changing The Gaps Between Banners, Video and Copy (Dawn Theme)

Shopify Discussion

Topic summary

A user working with Shopify’s Dawn theme wants to:

  • Reduce spacing between copy, images, and banners
  • Make text span the full page width, especially on mobile

A community member provided a solution involving custom CSS:

Initial approach:

  • Navigate to Online Store > Themes > Edit Code
  • Open the theme.liquid file
  • Add custom CSS code after the <head> element

Current status:
The first code snippet didn’t resolve the spacing issues. An updated CSS solution was provided with instructions to save the file and reload the page to verify changes.

The discussion remains ongoing as the user tests the revised code to see if it successfully addresses the layout gaps.

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

Hi,

I’m using the Dawn theme and would like to reduce the gap between my copy and images on my pages. I would also like my copy to run the full width of the page. When viewing it on mobile it looks odd.

Do I need to add customs CSS, or does anyone know how this can be changed in the theme?

This is the website address www.gudfur.com

Thanks!

2

Hi @GudFur

Open Online store > Themes > Edit code > open theme.liquid file, add this code below after element
3

Hi Dan

I added the suggested code to the theme, however I still see the gaps?

GudFur_0-1704719888523.png
GudFur_0-1704719888523.png1086×286 8.88 KB

4

Please update the code to this. Make sure you save file and reload your page to check