Code

Product Development & Sourcing

Topic summary

A user seeks help making their website banner stretch to full width, matching a reference site (“Scars by Rage”). Currently, their banner appears narrower than desired.

Proposed Solution:

  • Add custom CSS code to the theme’s stylesheet forcing the banner section to 100% viewport width
  • Key CSS properties include: width: 100vw, max-width: 100%, and removing padding/margins

Alternative Approaches:

  • Check theme customizer for built-in “Full Width” section settings
  • Modify the banner’s Liquid template file directly by adding a custom class to the wrapper div

Status: The issue remains unresolved pending the original poster’s implementation of the suggested code. A follow-up offer was made to provide theme-specific guidance if more details are shared.

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

I want my website same wide as shown in other pic “Scars by rage” [Like the banner my is not that wide] tell me the custom code please !!

My wesite
My wesite3741×1953 364 KB

Reference Website
Reference Website3760×1981 765 KB

2

Hi @Jashan

I see what you’re asking—you want to make your banner (or section) as wide as the one shown in the “Scars by Rage” example. Right now, it seems like your banner isn’t stretching fully across the screen, and you need a custom code to fix that.

Solution:

You’ll need to modify the CSS to make your banner section full width. Try adding this code in Online Store > Themes > Edit Code and locate your theme.css (or base.css) file. Scroll to the bottom and add this:

.banner-section {

width: 100vw !important; /* Ensures full screen width */

max-width: 100% !important; /* Prevents unnecessary constraints */

margin: 0 auto; /* Centers the banner */

padding: 0; /* Removes unwanted spacing */

}

**Alternative Method (If Above Doesn’t Work):**1. Go to Online Store > Themes > Customize.

  1. Click on your banner section.
  2. Check if there’s a “Section Width” setting—some themes have an option to select Full Width instead of Contained.

If your theme doesn’t allow that, you can also force the banner inside the Liquid file:

  1. Go to Online Store > Themes > Edit Code.
  2. Open section-banner.liquid (or similar, depending on your theme).
  3. Find the
    wrapping the banner image and add class=“banner-section” to it.

This should now match the width of “Scars by Rage.”

If you can share your theme name, I can provide more specific guidance!

Let me know if this helps, and I’ll be happy to assist further.
Best regards,
Daisy.