How to set the max header width to 2160px and the main body section to 1400px (or something else)

Store Design
, ,

Topic summary

A user seeks to customize their Shopify store (using the Combine theme) with different maximum widths for different sections:

Primary Goals:

  • Set header to 2160px max-width (spanning full display width, keeping logo at far left)
  • Limit main body content to 1400px max-width (centered, not edge-to-edge)

Additional Request:

  • Modify a 4-column homepage section to display as 2 columns on mobile instead of 1

Solution Provided:
Another user offered CSS code to be added via:
Online Store > Themes > Edit code > Assets > custom.css

The code targets .header__top and .header__bottom classes with max-width: 90%

Note: The provided solution appears incomplete or may not fully address the specific width requirements (2160px header, 1400px body). The discussion includes reference images showing the current mobile and desktop layouts.

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

Sit- https://foxtree-designs.myshopify.com/

Theme - Combine

I would like to set the header width to respond to whatever display a viewer is using ultimately to keep the logo on the far left and have the body section of my site to be centered and not extended to the edges like the logo on monitors that are 2160. My apologies for the lack of terminology.

FTD Example.png
FTD Example.png3833×1870 1020 KB

Additionally, on my homepage I have a 4 column section that I would like to be 2 columns on mobile rather than 1 column.

FTD Mobile.png
FTD Mobile.png754×1617 402 KB

Thank you in advance!

2

Hi,

Add this CSS code
Online Store > Themes > Edit code > Assets > custom.css or theme.css

.header__top, .header__bottom { max-width: 90%; }