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
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.
.... content ....
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
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.
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.
