How can I adjust the text width for a specific page on my site?

Store Design

Topic summary

A user needed to expand the text width of a page title and description to match the full-width collection list on a specific page (featured-artist-collections) while keeping other pages at their current narrower width.

Theme Details:

  • Theme: Craft version 12.0
  • Page template name: featured-all-artist

Solutions Offered:

Two community members provided CSS-based solutions:

  1. Moeed’s approach: Add custom code to theme.liquid file using Liquid conditional logic to target the specific page handle

  2. Made4uo-Ribe’s approach: Add CSS to the theme’s stylesheet (base.css/style.css/theme.css) targeting the page width class with media queries

Resolution:

Initially, neither solution worked. Made4uo-Ribe then suggested adding !important flags to the CSS properties to override existing styles. This final adjustment successfully resolved the issue, achieving the desired full-width layout for the page title and description.

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

I’m looking to make the page title and description use the full page width on one specific page of my site (https://guthriestore.com/pages/featured-artist-collections). The page features a large number of selected collections with a short description at the top. The title and description are currently narrower than the list of collections (which are at 100% width).

The other pages on the site (About us and Contact/Hours/FAQs) are also at the narrower width, but I’d like to keep those as they are.

Some details:

Theme: Craft version 12.0

Page template name: featured-artist-all

Thanks,

Brian.

1 Like
2

Hey @MN_Brian

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

{% if page.handle == "featured-artist-collections" %}

{% endif %}

RESULT:

Moeed_0-1705682140957.png
Moeed_0-1705682140957.png1827×920 247 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hi @MN_Brian

Check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media screen and (min-width: 990px) {
.page-width.page-width--narrow.section-template--17113817579752__main-padding {
    max-width: 120rem;
    padding: 0 5rem;
}
}

And save.

Result:

Made4uoRibe_0-1705697741203.png
Made4uoRibe_0-1705697741203.png1700×789 203 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

4

Thank you Moeed and Made4uo-Ribe for the clear instructions. I tried both options and neither one changed the text on that page. The result image that Made4uo-Ribe shows is exactly how I want it to look. I’m not sure what else to try.

1 Like
5

Add some !important maybe it will listen. If not let me know we can find another solution.

@media screen and (min-width: 990px) {
.page-width.page-width--narrow.section-template--17113817579752__main-padding {
    max-width: 120rem !important;
    padding: 0 5rem !important;
}
}

And save. Be sure you add it correctly no additional codes or missing. Codes are sensitive.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
6

Thank you, Made4uo-Ribe. That worked!

1 Like