First off, my store is stic-co.com and the password is D!sknmi192
I am trying to make it so the images in the product grid on https://stic-co.com/collections/stickers are centered. Currently, they all start at the same point at the top and the title and price are a fixed distance below that. I want to make it so the center of each image is a constant distance away from the title and price. A good place to see what I mean is at the bottom of the home page, where you can see the "eyes" product centered vertically. Go back to the collections page and it is not vertically centered, and is a large distance away from the title.
This is not a problem for most products, but any designs that are wide will result in that large distance between the image and the title. I have tried multiple solutions so the code may be slightly messy, but I can say for sure that nothing I have added has had an impact on the collection grid, as I have not dealt with it until now.
Welcome to the Shopify community!
and Thanks for your Good question.
Please share your issue images,
So I will check and provide a solution here.
Apologies, but I managed to find a solution to my issue. Now I have a different problem, I can't find the CSS which influences the size of the images in the product grids, and I need to reduce their size percentage. Any idea how I would go about this? If I need to start a new thread for this I understand, specifically I am only looking to reduce the image size on mobile to under 100% of the desktop size.
*In the future for those who look up this thread for the original issue, my solution was replacing the code in theme.css on the Debut style under .grid-view-item__image and tweaking it a bit, so the resulting code looked like this
transform: translate(-50%, -50%);