A user seeks to make their homepage collection list images display at full width with proportionally larger sizing.
Proposed Solutions:
Option 1: Add custom CSS to the section settings targeting slider-component with --page-width: 144rem to increase the width limit from 1200px to 1440px. The value can be adjusted higher or set to none for unlimited width, though this may reduce image quality.
Option 2: Edit the theme’s base.css file directly by adding .collection-list-wrapper.page-width { max-width: unset; } at the bottom to remove width constraints entirely.
Note: An initial suggestion to target .page-width in Custom CSS was corrected, as that selector doesn’t work in section-level custom CSS fields. The discussion remains open with no confirmed resolution from the original poster.
Hi there,
I am trying to make my home page collection list images come out full width, and i would like each image to be proportioniately larger. If anyone can help me with the code for this that would be amazing. please see image! thank you.
PW: ellaella
Go to this section settings and paste this into “Custom CSS”:
.page-width {
--page-width: 144rem;
}
This will raise the width limit for this section from 1200px to 1440px.
You may change it higher value or use “none” instead of “144rem” to make it grow further…
However, images will become fuzzier if much wider.
UPDATE – Custom CSS does not accept rules for .page-width, so try this code instead:
slider-component {
--page-width: 144rem;
}
Go to edit code your current theme then add this code to the bottom of file base.css:
.collection-list-wrapper.page-width {
max-width: unset;
}