Increase width of the page in specific page

[Good_Mood]

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

[iffikhan30]

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 %}

<div class="custom_page_width">
<!-- your Stuff -->
</div>

[Good_Mood]

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

[iffikhan30]

Add this code on your page.liquid file

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

[PageFly-Richard]

Hi @Good_Mood 

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> 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 </head>

<style>
#shopify-section-template--21736491122968__76ec2ce9-7f67-4727-b29c-bd1fed396bbb .image-with-text {
max-width: 200rem;
}
</style>

Hope this can help you solve the issue 

Best regards,

Richard | PageFly

[Good_Mood]

Thanks PageFly,

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

[PageFly-Richard]

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

<style>
#shopify-section-template--21736491122968__76ec2ce9-7f67-4727-b29c-bd1fed396bbb .image-with-text {
max-width: 200rem;
}

#shopify-section-template--21736491122968__279824e4-35f9-4c59-93c3-10d4bbbcb02c .breadcrumbs {
margin-left: 50px;
}
</style>

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