Round corners on image banner on Dawn theme 13.0

Store Design
1

Hi there,

Is there any way I can get slightly rounder corners on the image banner in Dawn 13.0?
Like this:

example-image-banner-rounded.png
example-image-banner-rounded.png2000Ă—1615 606 KB

1 Like
2

This is Noah from PageFly - Shopify Page Builder App

Hi @SharonP_1 Can you sen me url this page. I have check Home page but not show image above.
Thank you.

Best regards,

Noah | PageFly

3

Hi @SharonP_1

Would you mind to share your store URL? Thanks!

4

It has a different banner now, but the issue is the same.

image-banner-round.png
image-banner-round.png2000Ă—800 198 KB

5

It is okay, that you change the banner. Its just need to add the rounded corners on the wrapper of the image. So even you change the image the corners will remain. But i would need your store URL or even a preview is enough. Thanks!

6

Hi @SharonP_1

Check thi one.

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:

#shopify-section-template--17802823696623__image_banner .banner img {
    padding: 0!important;
} 
.banner .banner__media:nth-child(1) {
    border-radius: 10px !important;
}
div#Banner-template--17802823696623__image_banner {
    margin: 0 20px;
}

And Save.

Result:

Made4uoRibe_0-1717764931426.png
Made4uoRibe_0-1717764931426.png1346Ă—335 221 KB

You add some code for border-radius i change into 10px to make uniform of your border radius in the store. This codes add but you add some padding in different selector that is why the border-radius 20px you add is not visible. I change that one.

1 Like