Image size for a media block over 2 columns.

[Born2BFreeGifts]

Using Eurus theme. Website is born2bfreegifts.com

If you look at the "shop barware" on the homepage it does not fit in the block correctly. Trying to figure out what size i need this to be to fit properly.

[CodingFifty]

Hi @Born2BFreeGifts,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

[Born2BFreeGifts]

Thanks for the response!

Two things: First it looks like code as forgoteen.

Second *and most important lol - I don't have a base.css file that I can seem to find - even searched for it

[CodingFifty]

Please share the store Password @Born2BFreeGifts 

[Born2BFreeGifts]

@CodingFifty zeofea

[CodingFifty]

Hi @Born2BFreeGifts,

.cell-template--18779011449058__4352d226-8e70-4b9d-94d5-8f8b0e27084b-1 img.w-full.object-cover.z-0.h-full.image-hover.hidden.md\:block.absolute.top-0.left-0.block.animate_transition_image.active {
    object-fit: inherit !important;
}

[Born2BFreeGifts]

That didn't seem to work 😞

[CodingFifty]

Could you please share a screenshot of the code?

[Born2BFreeGifts]

[CodingFifty]

Please try this code. @Born2BFreeGifts 

<style>
.cell-template--18779011449058__4352d226-8e70-4b9d-94d5-8f8b0e27084b-1 img.w-full.object-cover.z-0.h-full.image-hover.hidden.md\:block.absolute.top-0.left-0.block.animate_transition_image.active {
    object-fit: inherit !important;
}
</style>

[Born2BFreeGifts]

So that made it fit, but it's super squatty and not proportional now. What should I make the image dimensions to fix this?

[CodingFifty]

Hi @Born2BFreeGifts,

Please try this code.

<style>
.media-media_VWTchr img.w-full.object-cover.z-0.h-full.image-hover.hidden.md\:block.absolute.top-0.left-0.block.animate_transition_image.active {
    object-fit: scale-down !important;
}
</style>

[Born2BFreeGifts]

That fixed the proportion, but now it doesn't take up the two columns as it should. Looks out of place. 

[CodingFifty]

The size of your image is limited, so it might be like this.

You can use this code instead; it's better.

<style>
.media-media_VWTchr img.w-full.object-cover.z-0.h-full.image-hover.hidden.md\:block.absolute.top-0.left-0.block.animate_transition_image.active {
    object-fit: inherit !important;
}
</style>

[Born2BFreeGifts]

That will work thank you! 

Can you help me do the same with the other images in that section and the top banner?

The heads are being cut off

[CodingFifty · Accepted solution]

@Born2BFreeGifts,

<style>
.image-971b1015-ef28-4d4a-a43c-646bfd6da4a0 {
    object-fit: inherit !important;
}

</style>

Please mark the solution,