Full-width background colour

Topic summary

A user is attempting to create a custom reviews section with a full-width colored background banner containing a title. The desired design shows a blue background spanning the entire page width, but the implementation only produces a narrow colored strip that doesn’t extend edge-to-edge.

Technical Details:

  • Theme: Supply 8.9.23
  • Using custom HTML/CSS (no app)
  • Applied CSS includes .bg-secondary with #00aeef blue background color
  • HTML structure uses nested divs with classes for styling

The Issue:
The background color is constrained by parent container widths rather than extending full-width across the viewport. The current implementation results in a centered, limited-width element instead of the desired full-bleed design shown in the reference image.

The discussion remains open with no solution provided yet. Resolving this likely requires modifying container constraints or applying viewport-width styling to break out of theme layout restrictions.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.

Trying to build a new reviews section, where the title looks like this:.

This is what it looks like when I add it:

This is the HTML code I am using


            #### 
                Reviews            
        

This is the CSS code I am using

.bg-secondary{background-color:#00aeef}
.text-white {
    color: #fff;
}
.leading-\[1\.345\] {
    line-height: 1.345;
}

.font-normal {
    font-weight: 400;
}

.text-\[40px\] {
    font-size: 40px;
}

.relative {
    position: relative;
}

No, not using an app.

The theme is Supply 8.9.23

www.physioworldshop.co.uk