Make webpage text and image appear wider on dawn theme

Store Design
,

Topic summary

Goal: Make content on a specific Shopify page (Dawn theme) display wider so images appear larger, without changing the rest of the site.

Key solutions proposed:

  • Add a page-specific condition in theme.liquid before using a Liquid check for the ‘page.creating-your-design’ template to scope custom CSS to that page.
  • Increase the desktop max-width of .page-width–narrow via CSS (placed in base.css/theme.css or Theme settings > Custom CSS):
    • @media (min-width: 990px) { .page-width–narrow { max-width: 126rem !important; } }
    • Alternatives shown with 100rem or 90rem to tune desired width.

Notes:

  • The media query targets desktop (min-width: 990px). Adjusting .page-width–narrow globally may affect other pages that use this class; using the Liquid page condition limits changes to the specified page.
  • Images in replies illustrated the widened layout; code snippets are central to understanding the fix.

Outcome: The original poster confirmed the change worked. Issue resolved; no further questions raised.

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

I have some webpages I created. The text and image box width is too marrow. I want it to display wider so that the image will load in larger. I have tried codes but nothing seems to work and you cannot do it within dawn theme its self.

I only want the webpages wider, not the rest of my site pages.

https://qbe0ie-au.myshopify.com/pages/creating-your-design

page wide.jpg
page wide.jpg1000×350 81.1 KB

Thank you

2

Hello @amystars ,

Edit theme.liquid

Search for

now just before to it add this code

{% if template == 'page.creating-your-design' %}
  
{% endif %}

Regards
Guleria

3

Hello @amystars
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.

@media screen and (min-width: 990px) {
.page-width--narrow {
max-width: 126rem !important;
}
}

result

90.png
90.png1920×709 217 KB

Thanks

4

Hi @amystars

  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.
@media screen and (min-width: 990px) {
    .page-width--narrow {
        max-width: 100rem !important;
    }
}

Result:

websensepro_0-1734691209209.png
websensepro_0-1734691209209.png1347×611 237 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

Hi @amystars

Please go to Theme editor > Theme settings > Custom CSS to add this code:

@media screen and (min-width: 990px) {
.page-width–narrow {
max-width: 90rem !important;
}
}

LizHoang_2-1734708629306.png
LizHoang_2-1734708629306.png1722×866 232 KB

I hope my answer is helpful!

Best,
Liz.

6

Yes that seemed to do it, thank you!