can we add here white border?

[Emiway]

can we add here white background with round corner just like text box.. because the image is short & text block is bigger.. i dont want image to be stretched 

URL: https://redpandaoutdoor.in/products/pivot

[BSSCommerce-B2B · Accepted solution]

Step 1: Go to Admin -> Online store -> Theme > Edit code

Step 2: Search for the file theme.liquid

Step 3: Add this code before </body> tag

.media-with-text__media.rounded img {
    background-color: white !important; 
}

Here is result 

[BSSCommerce-B2B]

If it is helpful, can you kindly give us many likes and mark the solution for us? 

This can be a reference for other merchants if they have an issue like you and greatly motivate us to contribute to our community. 

Have a nice day, sir! 

[Emiway]

Not working

[Emiway]

You Forgot to add style tag

[BSSCommerce-B2B]

Sorry my bad, Happy to help you 

[Laza_Binaery]

Hi @Emiway 

You can edit  this code in theme.css

.media-with-text__media {
    grid-area: media;
    position: relative;
    overflow: hidden;
}

and add a white background

.media-with-text__media {
    grid-area: media;
    position: relative;
    overflow: hidden;
    background: white;
}

and while top looks fine bottom is a bit cut off.

And I know you said you do not want to stretch an image, but if you remove

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

or change it to

.media-with-text__media img {
    object-fit: cover !important;
}

In probably section code, that will fill up the image fine and will not stretch it.

The last option is to make the image the same aspect ratio as the block so instead 800 x 800, 1:1 it could be 788:828 so 1:1,05 that should make fill up the space without any code changes.