Image with text full width on both desktop and mobile

Shopify Discussion

Topic summary

Goal: Make the Dawn 14.0.0 “Image with text” section span full width on desktop and mobile, removing left/right white gaps.

Attempts and troubleshooting:

  • Initial custom CSS suggested (adjusting .image-with-text margins and grid width) did not work.
  • Store URL and password were shared to diagnose. A mockup image clarified the desired edge-to-edge look.

Working solution implemented:

  • Edited base.css to target the specific section instance. Key changes: set the section’s .page-width padding to 0 (with !important) and apply overflow-x: hidden on the section to prevent horizontal scroll. This achieved full-bleed width as requested.

Outcome:

  • The store owner confirmed the fix worked and marked it as the solution.

Additional note:

  • An alternative CSS approach was later proposed (removing padding on .image-with-text, .image-with-text__content, and .page-width; setting grid to ~99vw). This was not confirmed by the requester since the earlier solution already resolved the issue.

Status: Resolved. Images in the thread served to illustrate the desired layout.

Summarized with AI on December 29. AI used: gpt-5.
1

I am using Dawn theme 14.0.0 and trying to have my image with text full width. In other words, i would like both sides to be touching either side of the page rather than having a white gap. Can you help me with this?

2

Could you please share your website url?

3

Hi @lewis765678
Please put this code in custom css part in “image with text” section

.image-with-text {
  margin-inline: 0px;
}
.image-with-text__grid {
  width: 100vw;
}

pawankumar_0-1715520554082.png
pawankumar_0-1715520554082.png1829Ă—797 207 KB

Please check if it is helpful to you.

Thanks!

4

Sorry, it still does not seem to be working. any other ideas?

5

Im looking for there to be no padding on the left and right side of the image with text so that it has not wide gaps either side of it.

6

Can you please share store url and password as well in case it is password protected ?
It will help me to look into the issue
Thanks!

7

https://012d71-4a.myshopify.com/

password: skeech

8

You want to like this? @lewis765678

thirtycoders_0-1715522119227.png
thirtycoders_0-1715522119227.png1112Ă—549 178 KB

9

yes that would be amazing!

10

Hello @lewis765678 ,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at the bottom of the file → Save

.section-template--22717523460444__image_with_text_3LVCCD-padding.gradient.color-scheme-1 .page-width {
   padding: 0px !important;
}

.section-template--22717523460444__image_with_text_3LVCCD-padding.gradient.color-scheme-1 {
overflow-x: hidden;
}

Thanks!

1 Like
11

Thats done it! thanks very much

1 Like
12

Welcome please like and mark the solution @lewis765678

1 Like
13

@lewis765678
Please replace that custom css with

.image-with-text {
  margin-inline: 0px;
  padding-inline: 0px;
}
.image-with-text__grid {
  width: 99vw;
}
.image-with-text__content {
  padding-right: 0px;
}
.page-width {
 padding-inline: 0px;
}

and if it works for you
Thanks!