How can I modify the Craft theme 11.0 for optimal website layout?

Store Design
, , ,

Topic summary

A user seeks help modifying the Craft theme 11.0 for their Shopify store, focusing on three main layout issues:

Primary Issues:

  • Making the header full-width across all screens
  • Fixing a slideshow section that overlaps content toward the bottom of the website
  • Expanding the featured blog section to full width

Proposed Solutions:
Two community members (Made4uo-Ribe and PageFly-Theodor) provided CSS code snippets to address these problems:

  • Custom CSS targeting the header element to achieve full-width display
  • Adjustments to .page-width and related classes
  • Modifications to padding and max-width properties

Current Status:
The discussion remains unresolved. The original poster tested the suggested CSS solutions but reported they didn’t fix either the overlapping issue or the width problems. They’re now asking if adding margins elsewhere might resolve the overlap.

Note: Some text in the conversation appears reversed/encoded, suggesting potential formatting issues in the original thread.

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

Hi there, I would like to change a few things on my website. Any help would be greatly appreciated.

https://w9q214r1fdasnv9p-67488153874.shopifypreview.com

  1. Make the header the full width of all screens.

  2. The slideshow towards the bottom of the website is overlapping the section above. I am unable to fix this??

  3. Make the featured blog section full width.

Thanks in advance

1 Like
2

Hi @Kauriandoak

Try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
header.header.header--middle-left.header--mobile-center.page-width.header--has-menu.header--has-social,
.page-width-desktop.isolate.section-template--21365017608466__833c83fb-ae22-4987-b41d-a2e93ed98667-padding {
    max-width: 100% !important;
}

The reason of the overlapping are the - menus margin of the banner. You minus it for the header to be show be background of the header. So every time you add a banner it will overlap.

3

Hi @Kauriandoak
This is Theodore from PageFly - Shopify Page Builder App.
For solving the problem about the A Few Changes On Craft Theme 11.0, let’s try this solution:

Online Store ->Theme ->Edit code

.header {
    padding-top: 20px;
    padding-bottom: 20px;
    max-width: 100% !important;
}

@media screen and (min-width: 990px){
	.page-width-desktop {
    max-width: unset;
    padding: 0 5rem;
}
}

Assets ->Base.css

I’ll be so happy if my suggestion can help to solve your problem. If you have any further questions, please feel free to tell me.
Best regards,
Theodore | PageFly

4

https://w9q214r1fdasnv9p-67488153874.shopifypreview.com

that didnt seem to work on either issue unfortunatly. Is there a way to fix the overlapping issue can you add more margins elsewhere?