Hello,
I would like to improve the UI on mobile devices by reduce space between product on a featured collection or collection page : grid item
I tried to adjust inside @media … the .grid and .grid__item but I always get this space on the right side.
It’s div .page-width but it affect all the website.
I repeat, I only want it for product on the grid.
Thank you for your response 
Mario
Hi @mario_sire
Thank you for your question.
Please share your store URL, page URL and also password (if your store has one) so we can help you.
store : saltysmile.eu
Main page and collection page
Hi @mario_sire
Just checked your page, but I didn’t see the problem like the image above.
Have you fixed the problem by your self?
Yes of course I found and fix it!!
Solution:
Adjust the .grid & .grid__item featured collection and page collection do not use the same div but it will impact the other one.
Set the page width with padding-left: 0px
and then adjust the header, footer and others blocks 1 by 1 because everything will be borderless.
Hi, I’m trying to do exactly the same thing, full width product grids on MOBILE ONLY. I didn’t quite understand the solution given by the original poster so any help will be greatly appreciated. Many thanks
store: futbolista.co.uk
pw: awnias
Hi @Mark1882
You can try follow this path:
Themes => edit code => asset => base.css
and add this code to bottom of the file base.css
.collection .slider-mobile-gutter {
padding-inline: 0!Important;
}
That’s great @ExpertRookie , and thanks for getting back so quickly. Is it possible to have it the same on collection pages as well?
Hi @Mark1882
.collection.page-width {
padding-inline: 0;
}
Thank you so much!
One more question, if I may? Is it possible to increase the width of my homepage banner as its now narrower than the product grid? The banner actually has a fixed width and is not a regular Dawn Hero banner. Does that make sense? Screenshot attached. Many thanks
Forgot to mention that this question applies only to the desktop version.
