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
Step 1: Go to Admin → Online store → Theme > Edit code
Step 2: Search for the file theme.liquid
Step 3: Add this code before tag
.media-with-text__media.rounded img {
background-color: white !important;
}
Here is result
1 Like
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!
Not working
You Forgot to add style tag
Sorry my bad, Happy to help you
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.