Make Image Banners Match Site Width - Craft Theme

Store Design
, ,

Topic summary

Goal: Make image banner sections in the Craft theme match the same page-width as other content (menu, featured collections, footer). Screenshots were attached to illustrate the mismatch; code snippets are central to the discussion.

Key steps and responses:

  • A helper requested the store URL/password to inspect; the OP shared the page link.
  • Proposed fix #1: Add custom CSS in base.css to align .banner to the page width. After the OP applied it, the banner width did not change.
  • Diagnosis: The banner section reportedly doesn’t include the page-width class, which may prevent the CSS from taking effect. The helper asked for collaborator access or code sharing to adjust the section markup/classes.
  • Proposed fix #2: Another contributor suggested adding Custom CSS in theme settings to remove padding for a specific banner section ID: “#shopify-section-template–… .page-width { padding: 0; }”. An image showed where to add Custom CSS in the theme settings.

Status: No confirmation yet that either approach resolved the issue. Next actions: grant access/share section code for proper class assignment, or test the targeted padding override and verify banner alignment.

Summarized with AI on November 26. AI used: gpt-5.
1

Hello,

I am simply trying to have my image banners match the same width as my page content, so whenever i choose to plug on in, it automatically makes the width appropriate. My menu, featured collections, footer are all the same width. The image banners for whatever reason are more narrow and do not match the same width. Can’t figure this out for the life of me, if anyone could help that would be super appreciated! Screenshots attached:

Screenshot 2025-11-23 at 12.47.13 PM
Screenshot 2025-11-23 at 12.47.13 PM1920×938 218 KB

3

Hi Daniel!

Sorry forgot to add the link: New Homepage – The Type Fella

4

Hey @jmd92,

In order to align the banner with the page width then you need to follow these steps.

Go to Shopify Admin >> Online Store >> Edit Code >> base.css

In the end of base.css paste the following code shared below.

@media screen and (min-width: 990px) {
.banner {
    max-width: var(--page-width) !important;
    margin: 0 auto !important;
    padding: 0 5rem !important;
}
}
@media screen and (min-width: 750px) {
    .page-width-desktop {
        padding: 0 1.5rem !important;
    } 
}

The css make sure that the banner should align with the page width.

Hope this helps.

Cheers :slight_smile:

5

Hi there! Thank you so much for the response. I pasted this into the bottom of my base.css but it still stays the same for some reason. Very odd!

6

oh I understand.

Actually the current banner don’t have the page width class. By any chance can you share your store collab code in the p/m so that I can fix it by myself?

7

Please add this code to Custom CSS in theme settings

#shopify-section-template--16500938735779__custom_liquid_fWmHB3 .page-width {
  padding: 0;
}

Custom CSS in Theme setings
Custom CSS in Theme setings1920×1738 260 KB

Best regards,
Dan from Ryviu: Product Reviews App