How to change the width of a custom page in dawn theme

[mysticgleam]

Hello guys,

I am making a custom page but i am not able to find any solutions on how to change the width of custom page. I want to add 4 products or 5 products in one row but unable to do so cause of page width.  https://mysticgleam.com/pages/crystal-encyclopedia

[BSS-TekLabs]

- Here is the solution for you @mysticgleam 
- Please follow these steps:
1. Go to Online Store --> Theme --> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head> and press 'Save' to save it

<style>
.page-width--narrow {
        max-width: 100% !important;
    }
</style>

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[mysticgleam]

I just want to change one page, apply this code change the width of all pages on my site.

[BSS-TekLabs · Accepted solution]

{% if request.path == '/pages/crystal-encyclopedia' %}
  <style>
.page-width--narrow {
        max-width: 100% !important;
    }
</style>
{% endif %}

Can you try this code @mysticgleam 

[BSSCommerce-B2B]

@mysticgleam ,

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

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
   #shopify-section-template--20699973353760__main .page-width--narrow {
        max-width: 100%!important;
   }
   .section-template--20699973353760__main-padding .main-page-title {
       padding: 0 20px!important;
   }
</style>

Result

If it helps you, please like and mark it as the solution.

Best Regards 😍

[mysticgleam]

This code is not working

[BSSCommerce-B2B]

Could you show me the code you added to your theme.liquid file? Or you could try adding it to above </body> tag like this 

[Tech_Coding]

Hello @mysticgleam 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
section#shopify-section-template--20699973353760__main .page-width.page-width--narrow {
max-width: 100% !important;
}
</style>

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[olive57]

Here is the solution

To change the width of your custom page and fit 4-5 products per row, try setting a custom CSS rule. You can adjust the container width and set a flexible grid for your products:

```css
.custom-page {
width: 100%; /* or a specific width */
max-width: 1200px; /* adjust as needed */
margin: 0 auto; /* center the content */
}

.product-grid {
display: grid;
grid-template-columns: repeat(4, 1fr); /* Change 4 to 5 for five products */
gap: 20px; /* Adjust gap between products */
}
```

Make sure your container element uses the `.custom-page` class, and the products are inside a `.product-grid` wrapper. Adjust values to fit your design.