How to make 'image with text' image full width - dawn

Store Design
,

Topic summary

A user wants to make the image in Dawn theme’s ‘image with text’ section full width on their Shopify store.

Initial Solution:

  • Custom CSS code provided: .gradient > div { max-width: none; padding: 0; }
  • This successfully makes the image full width but has a side effect

Problem Encountered:

  • The code also widens the text section, causing text to spread too far
  • User needs the full-width effect to apply only to the image, not the text

Revised Solution:

  • Alternative CSS targeting specifically the image on mobile devices:
@media (max-width:749px) {
  .image-with-text__media {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
  }
}

Note: A Shopify bug currently prevents using page-width in Custom CSS settings. Images may appear fuzzy on very wide screens when stretched beyond default width.

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

hello, i would like to make my ‘image with text’ image full width. My store is www.antico-abito.com , theme is dawn

Screenshot 2025-08-08 at 20.43.33
Screenshot 2025-08-08 at 20.43.331016×671 44.9 KB

2

Try this in “Custom CSS” setting of this section:

.gradient > div {
  max-width: none;
}

Shopify currently has a bug when you can’t use page-width in “Custom CSS”, therefore the selector is funny.

Also note that Image is not really designed to grow over the default width and on really wide screen it may become fuzzy.

Also, if you want indeed want the image to be full-bleed, then the code should be:

.gradient > div {
  max-width: none;
  padding: 0;
}
3

.gradient > div {
max-width: none;
padding: 0;
}

this code works perfectly, however when i add it, it also make the text wider so my text is too far wide. Is there a way to make this code only work for the image?

4

Ah, you can try this instead:

@media (max-width:749px) {
  .image-with-text__media {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
  }
}