Why isn't my header and footer filling the entire space in the dawn theme?

Technical Q&A
,

Topic summary

Main issue: In the Shopify Dawn theme, custom background textures/colors applied to the header and footer weren’t covering the full width, while a multirow section worked correctly.

Attempts: Using max-width: 100% didn’t help. Guidance suggested opening the theme editor, locating header/footer sections, and adjusting CSS (e.g., width: 100%) so the background covers the entire section.

Key update: The header was fixed by targeting the correct CSS selector .header-wrapper instead of the header tag, which allowed the background image to span the full header.

Status: Footer remains unresolved. The next step is to identify the equivalent wrapper/container selector for the footer and apply the background to that element.

Notes: Three screenshots were provided to illustrate the issue (visible gaps on both sides of header/footer and the code used). Technical terms: CSS selector (.header-wrapper targets the header’s container), width: 100% sets an element to fill the available width.

Summarized with AI on January 27. AI used: gpt-5.
1

Hello everyone!

Would love if someone could help me solve this problem.

I am using the dawn theme.

Below you’ll find attached 3 screenshots.

The first one is the code I’ve used to add my texture/coloured background to my multirow, header and footer. The multirow works fine (it covers the whole section).

The second one is my header, if you look to the left and right of the header it cuts off.

The third one is of my footer, as you can see, yet again it doesn’t fill the entire space and leaves a gap of the original background and colour.

Please help find a solution to this problem. I’ve tried adding in commands like “max-width: 100%”. nothing has worked so far.

PS. I’m also fairly new to coding, so would really appreciate a step by step on the solution and what section I should paste any possible solutions. And happy to work one on one with someone and perhaps pay for a lesson in it if necessary.

Thanks!

Screen Shot 2023-05-16 at 7.01.06 PM.png
Screen Shot 2023-05-16 at 7.01.06 PM.png2876×1192 282 KB

Screen Shot 2023-05-16 at 7.01.31 PM.png
Screen Shot 2023-05-16 at 7.01.31 PM.png2844×556 401 KB

Screen Shot 2023-05-16 at 7.01.43 PM.png
Screen Shot 2023-05-16 at 7.01.43 PM.png2870×816 360 KB

2
  1. Click on the “Customize” button for the Dawn theme to open the theme editor.
  2. In the theme editor, locate the sections for the header and footer. These sections may have different names depending on the specific structure of the Dawn theme.
  3. Within the header and footer sections, look for the CSS code that controls the background color or texture.
  4. Adjust the CSS code to ensure that the background covers the entire section. You can try adding width: 100%; to the CSS rule for the background.
3

I found the solution. Write “.header-wrapper” not just “header”. This will cover the entire header with your image.

Now i just need to find the same command but for the footer.

Screen Shot 2023-05-17 at 9.03.30 AM.png
Screen Shot 2023-05-17 at 9.03.30 AM.png2612×1152 275 KB