A user seeks to make collection photos display at full width on their Shopify store, specifically removing white space on the right side of the BESTSELLERS collection and other collection pages.
Initial Solution:
.collection.page-width and .grid--4-col-desktop elements to achieve 100% widthOngoing Issues:
Current Status:
I want the BESTSELLERS collection to use full width. There is a small white space left on the right side. Please help me fix this. I want it for all collections on the page if I add more products.
Scroll down a bit and you will see the collection immediately.
https://www.withdahw.com/
Besides that I want the collection pages to use full width as well
I am talking about this page: https://www.withdahw.com/collections/quarter-zip
Hi @mira777
Chekc this one.
From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
Find the theme that you want to edit and click on “Actions” and then “Edit code”.
In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media screen and (min-width: 990px){
.grid--4-col-desktop .grid__item {
max-width: 100% !important;
}
}
.collection.page-width {
padding: 0rem !important;
}
And save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Hi, i added the above code and it worked for mobile version only however, i would like desktop version to have the full width too. Can you please guide me how i can include this for desktop version please. Also, for mobile version its only full width from left to right and not full width on top, there is still a white gap in between the product collection and sort by/filters?
This is my website below:
Hi @crepscity
Which collection you like to full width? Is it in the collectins pages?
check this one.
From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
Find the theme that you want to edit and click on “Actions” and then “Edit code”.
In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.collection.page-width {
max-width: 100%;
padding: 0;
}
ul#product-grid {
margin-top: 0;
}
And Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Hi, it worked perfectly after i put the code into theme.liquid and it aslo resolved the white gap in between the collection page products and sort by/filters.
But i have an issue with sort by/filters for *desktop version only. On mobile view, when you click any product collection you can see where it says sort by and around it there are two black boarder lines which i added code for however, these two boarder lines only show on mobile version only and not on desktop which i would like to implement also. I have shared the photos below. Again thank you in advance.
Yes, you didnt add the code creectly on the base.css.
This is your current base.css now. Where you add the border for this filter.
Please add more } on the top of the border code line 2937 line.
And delete this line.
It should be same on the image below.
And Save.
When you save and preview. Youll see this cut lines.
You need to add margin on the code. Make sure the margin is inside the bracket.
margin: 0;
After adding the margin, add this code on the last closing bracker on your base.css.
div#shopify-section-template--17707301339375__product-grid .page-width {
max-width: 100% !important;
}
And save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Hi, WOW! thank you. It worked perfectly. However i can observe in the product collections there all full width as i wanted but if you click into DESIGNER → Louis Vuitton Outerwear OR Dior → Sneakers, these are not product grid collection and they are featured collections therefore, the code you provided to make all product collections full width did not trigger the featured collection which is the reason why they are not full width. What code should i add to make featured collection full width?
Again, thank you in advance.
Kind Regards,
Creps City
Hi, any update with the above inquiry?
Thanks.
Kind Regards,
Creps City
Hi again, i have noticed on all my product collection for desktop version only that every last 1-3 products are huge images which shouldn’t be like that and they where all normal portrait sizes. I think one of the codes you shared had caused to trigger this. can you please review this.
I have shared an image below.
Add this code then.
slider-component.slider-mobile-gutter.slider-component-full-width.page-width {
padding: 0px;
}
And Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
If you assign them on the normal sizes. When you max-width the sections normally the sizes will bigger, the image occupy all the available left and right spaces so it zoom.
Hi, thank you for the info. Im still kinda confused in regards to the image size cause ive deselected the max width and all the top and middle products are perfect sizes however, the last 1-3 products on each collection are too big So, how do i put the product images back to normal as they where normal before cause this happend when i added one of the codes above?
Kind Regards,
Creps City
to explain it better. The product grid, in Dawn. For example, in the collections pages, if the number of products in the last row is not equal to the number of columns, the image displays at the full width of the page, instead of sticking to the same format of all the other images. See the screenshot attached below again.
Thank you in advance.
Hi. aslo i can observe that the code provied by you in regards to making featured collections full width only worked for *desktop version only and did not trigger mobile version?
Kind Reagrds,
Creps City
Hi, any update with the above inquiry?
Thanks.
Kind Regards,
Creps City
Hi again, i really need help to have this resolved as soon as possible as the product collection images on the last (1-3) rows are large, as it was not displaying like this before i entered the code you provided me. Please tell me what to do so we can fix this.
Thanks.
