make image with text full width

Store Design
, ,

Topic summary

A user seeks to remove white gaps on the sides of an “image with text” section on their Dawn theme store, wanting it to span the full page width.

Solutions Provided:

Multiple experts offered CSS-based fixes targeting the padding:

  • Mobile-specific solution: Add CSS to Custom CSS section in Theme Settings to remove inline padding on screens ≤768px
  • Section-specific solutions: Two similar approaches recommend adding CSS to theme.css/base.css file, targeting the specific section class to set left/right padding to 0

All solutions involve adding padding-left: 0 and padding-right: 0 declarations with !important flags to override existing styles. One responder noted this may slightly alter the overall page structure.

Status: Multiple working solutions provided with visual proof, awaiting user confirmation of which approach they’ll implement.

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

hello, i want to make my image with text the full page width so that there are no white gaps on the sides:

Screenshot 2025-01-08 at 13.07.03.png
Screenshot 2025-01-08 at 13.07.03.png1041×939 187 KB

my website is www.marcomontesi.com , theme is dawn

2

@ads18922 where is this image added? it must be having padding around, it can be removed but it will change page structure a bit

3

HI @ads18922

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
@media screen and (max-width: 768px){
.image-with-text__text-item.grid__item> div.image-with-text__content {
    padding-inline: 0 !important;
}
}

Here is the result:

image_480.png
image_480.png319×480 120 KB

I hope this helps

Best,

Daisy

4

Hi @ads18922

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
.section-template--23910238093635__image_with_text_gnQfi4-padding.gradient.color-scheme-1 .page-width {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

Result:

websensepro_0-1736342320348.png
websensepro_0-1736342320348.png404×472 167 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!

5

Hello, @ads18922

  1. Go to Online Store
  2. Edit Code
  3. Find theme.css/base.css file
  4. Add the following code in the bottom
.section-template--23910238093635__image_with_text_gnQfi4-padding.gradient.color-scheme-1 .page-width {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

Thanks!