Featured collection and collection larger and not cut off

[httpnavi]

Hi, 

The featured collection and collection list on my page are cut off, how do I get it to show full images and wider?

this is mine:

I would like it to look like this:

Site is https://combatstudios.online/

and password = webstore

Thanks in advance!

[Ellie-BOGOS]

Hi @httpnavi 😊

I’m Ellie from BOGOS, #1 Shopify Promotion App (Gifts, Bundles, Upsells, Discounts)

Because the frame of featured collection images is part of the theme design, you can't adjust the ratio of the frame to make it bigger and fit your image. Therefore, I highly recommend resizing your image to 495x300px, which will fit perfectly within the frame.

If you still want to display the full image without resizing it, please follow my steps below:

Step 1. Go to Online Store
Step 2. Find "Edit Code"
Step 3. Find any CSS file

Step 4: Add this code any where in that CSS file

.card__media .media img{ object-fit: contain !important; } 

Result:

If it worked, appreciate if you could Like and Accept as Solution!

[httpnavi]

Hi thanks for your reply, 

The images are no longer cut off so the code works well but unfortunately it doesnt get the desired look, I want the images bigger but I understand the theme limitations.

Do you have any other suggestions to make the images bigger?

[Ellie-BOGOS]

Hi @httpnavi 😊

Ellie again from BOGOS, #1 Shopify Promotion App (Gifts, Bundles, Upsells, Discounts)

The best way to do it may be to retake your image so it fits the frame. If that's not possible, here are my recommendations:

1. Use AI tools (like Canva, or other AI image tools) to expand your image so it fits the ratio of the frame.

*Here my example (I used AI by Canva to expand your image)

2. Redesign your image so it fits with the frame (adding the background,...)

*For example:

If my recommendation helped, appreciate if you could Like and Accept as Solution!