How to have images fill the page in collection list section

Store Design

Topic summary

A user seeks to reduce side margins in their collection list section to make images fill more of the page width.

Current Issue:

  • Images display with excessive white space on both sides
  • Screenshots provided showing current layout versus desired full-width appearance

Proposed Solution:
Another user provides CSS customization steps:

  • Navigate to Shopify Admin → Online Store → Theme options (three dots) → Edit Code
  • Locate and open the base.css file
  • Find the media query rule at @media (min-width: 750px)
  • Add CSS targeting .section-collection-list .collection-list-wrapper .page-width with max-width: 100%

Status: Solution offered but not yet confirmed as implemented or successful. The helper requests feedback on whether the fix resolves the issue.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I was wondering if there was a way I could increase the size of the images to fill up more of the page so there are less of a margin on the sides. The section is the collection list section, I will show you examples of what I mean.

Here is what it looks like now:

Screen Shot 2024-06-14 at 11.32.13 PM.png
Screen Shot 2024-06-14 at 11.32.13 PM.png1440×855 263 KB

Here is how I would like it to look:

Screen Shot 2024-06-14 at 11.32.28 PM.png
Screen Shot 2024-06-14 at 11.32.28 PM.png1440×860 279 KB

URL: https://www.yivan.us/

Pass: YIVAN24

Thanks in advance

2

Hello @YIVAN

To make images full to fill the display with normal space around, i’ve found the solution for it.

You just need to follow below steps:

  1. Go to the shopify admin, Go to online store and click on three dots on the theme you want to make changes.

  2. Click on edit code in option list and you can see code directory.

  3. In the code directory, find the file named “base.css” and open it.

  4. Find the rule at top that goes like this @media (min-width: 750px).

  5. In this CSS rule, copy the below mentioned code and paste it in the rule suggested above.

.section-collection-list .collection-list-wrapper.page-width {
  max-width: 100%;
}

By applying this css, your issue will be fixed.

If the solution helpful to you, then kindly like and accept the solition.

If you have any other queries, you can contact me directly.