How can I achieve full width for the hero banner on Sense theme?

Store Design
, , ,

Topic summary

A user is trying to modify the Shopify Sense theme’s ‘Image with text’ section to create a full-width hero banner with a centered split layout.

Current Issue:
The hero banner is constrained within a container box rather than spanning the entire page width.

Desired Outcome:
A full-width background with content split 50/50 in the center, as shown in attached design mockups.

Proposed Solution:
GemPages support provided custom CSS code to:

  • Remove padding from the image-with-text section
  • Set border-radius to 0
  • Adjust width properties to achieve full-width display
  • Target the specific section ID for precise styling

The code should be added to the base.css file in the Assets folder via the theme editor.

Status:
Another user (Litos) checked the implementation and appears to confirm it’s working, though their message is partially garbled. The discussion seems resolved with the CSS customization approach.

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

Hi,

Does anyone know how I can make the background to fill in the whole width of the page? Right now, I’m using ‘Image with text’ section as the Hero of the homepage. This hero banner is inside a container box. I’m trying to make this fill in the entire width of the site, with half split in the center of the page. I’m attaching the desired design below. Please let me know if there’s any way to do this.

preview link: https://h0lk0ezw3fpvq26v-57105678419.shopifypreview.com

Currently looks like this:

Screenshot 2023-03-08 at 3.46.49 PM.png
Screenshot 2023-03-08 at 3.46.49 PM.png3288×1518 473 KB

What we are trying to do:

Screenshot 2023-03-08 at 3.47.39 PM.png
Screenshot 2023-03-08 at 3.47.39 PM.png2030×1032 252 KB

2

Hello @jk888

You can try adding the below code:

  1. Go to Online Store → Theme → Edit code https://prnt.sc/XkUYXZPnym_E

  2. Open your base.css in the Assets folder.

  3. Paste the below code at the end of the file https://prnt.sc/iCsQNVijwn8C

@media screen and (min-width: 750px){
  #shopify-section-template--14930484854867__image-with-text .image-with-text{
     padding: 0 !important;
     max-width: 100% !important;
  }
  #shopify-section-template--14930484854867__image-with-text .image-with-text__text-item{
     width: 50% !important;
  }
  #shopify-section-template--14930484854867__image-with-text .image-with-text__media,
  #shopify-section-template--14930484854867__image-with-text img,
  #shopify-section-template--14930484854867__image-with-text .image-with-text__content{
     border-radius: 0px;
  }
}

Best regards,
GemPages Support Team

3

Hi @jk888 ,

I checked and it shows fine, did you solve it?