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:
.bg-secondary with #00aeef blue background colorThe 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.
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