How to have images fill the page in collection list section

Solved

How to have images fill the page in collection list section

YIVAN
Explorer
51 1 16

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

Here is how I would like it to look:

Screen Shot 2024-06-14 at 11.32.28 PM.png

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

Pass: YIVAN24

 

Thanks in advance

Accepted Solution (1)

parth_ghelani
Shopify Partner
74 12 12

This is an accepted solution.

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.

Parth Ghelani

View solution in original post

Reply 1 (1)

parth_ghelani
Shopify Partner
74 12 12

This is an accepted solution.

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.

Parth Ghelani