Increase width of the page in specific page

Shopify Discussion
1

hi,

i want to increase the width of the size guide page without impacting the other pages, can any one help.

https://cae01c-2.myshopify.com/pages/ring-size-guide

Good_Mood_0-1704261442299.png
Good_Mood_0-1704261442299.png1920×890 26.2 KB

2

Hello @Good_Mood ,

You can create a page template for specific page, Then you can add range schema, then you can add css.

Schema

{
  "type": "range",
  "id": "page_width",
  "min": 900,
  "max": 1600,
  "step": 100,
  "unit": "px",
  "label": "Page Width",
  "default": 1200
}

Next add. html and CSS

{% style %}
.custom_page_width{
width: {{ section.settings.page_width }}px;
}
{% endstyle %}
3

Hi Lffikhan,

Thanks for your time, but this seems advance fro me, can you tell me a code to put in the end of the CCS to do the change?

Have a nice day

4

Hi @Good_Mood

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

PageFlyRichard_0-1704266327002.png
PageFlyRichard_0-1704266327002.png1920×953 79.5 KB

Hope this can help you solve the issue

Best regards,

Richard | PageFly

1 Like
5

Add this code on your page.liquid file

iffikhan30_0-1704267230061.png
iffikhan30_0-1704267230061.png1216×478 44.9 KB

div#shopify-section-template--21736491122968__76ec2ce9-7f67-4727-b29c-bd1fed396bbb .page-width {
    max-width: 168rem;
}
6

Thanks PageFly,

I do increased the width, but can tell me how to align with the breadcrumbs above?

7

@Good_Mood You can replace the code above with this new one to have the code to adjust breadcrumb too

you can feel free to adjust the value to match with your requirement