How can I add corner radius to column images?

Store Design
,
1

Hi

I would like to make my photos in columns section to have little bit of corner radious.

I’ll appreciate help.

URL: https://60338a.myshopify.com/

1 Like
2

Hi @UL1

Do you mean the slideshow section?

Made4uoRibe_0-1694632749996.png
Made4uoRibe_0-1694632749996.png1338×460 387 KB

But there is a border down. Do you like to rounded on the top?

Here is the code.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.slideshow__text-wrapper.banner__content.banner__content--middle-center.page-width.banner--desktop-transparent img {
    border-radius: 20px;
}
  • And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

3

how to 101.jpg
how to 101.jpg1469×901 91.6 KB

i meant images of this section (these are actually a gifs but i don’t think it changes anything)

4

Yes, I mange to put some round corners but this is the result of the othe image.

Made4uoRibe_0-1694641249242.png
Made4uoRibe_0-1694641249242.png1332×511 184 KB

This is the code Ive used.

.media.media--transparent.media--adapt img {
    border-radius: 60px;
    object-fit: contain;
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

5

Thank you and do you know maybe how to make them same dimensions ? For ex to gif on the right be the same dimension as the one on the left?

And it doesn’t work on desktop view only on mobile