My images for my collection grid are too large.
I tried using the code suggestion below from another post and it didn’t work. Any other suggestions would be greatly appreciated.
#MainContent > section:nth-child(3) .collection li {
max-width: 300px !important;
max-height: 300px !important;
}
Hello @sfoster95
If the previous code suggestion didn’t work for resizing the images in your collection grid, you can try an alternative approach by adjusting the image dimensions directly. Here’s a modified code snippet you can use:
#MainContent section.collection li img {
max-width: 300px !important;
max-height: 300px !important;
}
This code targets the img elements within the collection grid and sets a maximum width and height of 300 pixels. Make sure to replace #MainContent with the appropriate selector for your theme.
Please note that depending on your theme’s structure and CSS specificity, you might need to adjust the selector accordingly to target the correct elements. You can inspect the collection grid using your browser’s developer tools to find the appropriate selector for your specific theme.
After applying the modified code, the images in your collection grid should be constrained to a maximum width and height of 300 pixels.
Remember to clear your Shopify cache and refresh the page after making the changes to see the updated image sizes.
Thank you so much I just need a bit of clarification sorry. Do I put this at the bottom of the base.css? Also when you say to replace #MainContent with the appropriate selector for my specific theme…I am not sure what you mean by that.
thank you,
Shannon
I just now saw the part about using development tools. I primarily do all of my work on my iPad and the developer tools in Safari only work on an iPad after connecting to a Mac and I have a windows laptop. I will have to try on my laptop.
Well I tried a developer tool app and have no idea what I am looking for so I guess I will just give up on the whole thing and leave them as is. I guess that is what I get for using a free theme. But I don’t have another option at this point.
I’ll be glad to help you out. Let’s get this fixed for you. To start, can you paste the link to your website, so I can help guide you in the right direction?
Thank you so much. I just posted a working solution. I appreciate your willingness to help though.
Of course. Feel free to reach out to me in the future if you ever have any questions.
