Need Help Adjusting Text-with-Image Section Width on Dawn theme

[technase]

Hi, 

Can someone help me increase the width of the text-with-image section on my collection page? Ideally, I’d like to do this using CSS code that I can just add through the theme editor, since I plan to use it for a few specific collections only. I’m attaching a screenshot to show how wide I want the section to appear.

store link: https://technase.myshopify.com/collections/all-products
storefront password: 12345

Any help is greatly appreciated 

[Jacob0908]

Hello, @technase 

I think you can customize it using --page-width of the css.
If you need to change the size only on text-with-image.liquid, You can add this code on the section liquid.

<div class="page-width" style="max-width: {{ section.settings.max_width }}rem;">
.... content ....
</div>

On schema settings,

{
  "type": "range",
  "id": "max_width",
  "label": "Max width",
  "min": 10,
  "max": 200,
  "step": 2,
  "default": 120,
  "unit": "rem"
}

Please let me know if it's not working. I hope it works well on yourend

[TheScriptFlow_]

You cannot change the page-width globally. You should need to name another class for the padding or a unique ID for this to make sure you can target it by indivisually. In this way if you target the page-width class then it will effect the whole page-width of your website.

Here is the best and effective solution.

• Go to Shopify Admin.
• Click on Online Store
• Themes > Customize a theme.
• Click on three dots > Edit code.
• In the Edit code search for image-with-text.liquid section.
• In the section preff ctrl + f and search for page-width. 
• In this class add a new class near it. Add custom-page-width like this <div class="page-width custom-page-width">

Now you are done you just need to paste this css in the theme.css or base.css file.

.page-width.custom-page-width {
  max-width: 160rem !important;
}

Results:

Now the Results are awesome.

In this way you can make sure the new page-width apply to only one section.

If this was helpful mark as Solution, Like and Buy me a Coffee.