Solved

Rounded corners image banner doesn't work

poe1
Excursionist
21 0 4

Hi,

 

I'd like to have the corners of my dawn image banner to be rounded. I have tried many different things and copied code snippets from other peoples posts but nothing worked. 

Very thankful for any hel

 

Bildschirmfoto 2024-04-08 um 11.51.07.png

Accepted Solution (1)
PageFly-Noah
Shopify Partner
1283 228 261

This is an accepted solution.

Ah, got it. If you want 2 image please add code above , if you want 1 image please add code below:

<style>
.banner .banner__media:nth-child(1){
    border-radius: 20px !important;
}
</style>

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 13 (13)

Moeed
Shopify Partner
3898 985 1232

Hey @poe1 

 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
poe1
Excursionist
21 0 4

cutegemz.com 

password: neatwu

Moeed
Shopify Partner
3898 985 1232

Hey @poe1 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag.

<style>
.banner__media.media.banner__media-half.animate--ambient.scroll-trigger.animate--fade-in {
    border-radius: 50px !important;
}
</style>

RESULT:

Moeed_0-1712570555354.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
poe1
Excursionist
21 0 4

Bildschirmfoto 2024-04-08 um 12.29.44.pngUnfortunately nothing changed.Bildschirmfoto 2024-04-08 um 12.28.48.png

Moeed
Shopify Partner
3898 985 1232

Hey @poe1 

 

Can you share a screenshot of the code you added in theme.liquid file?

 

Best Regards,

Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
poe1
Excursionist
21 0 4

Bildschirmfoto 2024-04-08 um 12.37.04.pngBildschirmfoto 2024-04-08 um 12.37.31.pngBildschirmfoto 2024-04-08 um 12.37.43.png

PageFly-Noah
Shopify Partner
1283 228 261

 

This is Noah from PageFly - Shopify Page Builder App

 

If you want remove breadcrumb you can try code:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </head>

 

<style>
.banner .banner__media:nth-child(1){
    border-top-left-radius: 20px !important;
    border-bottom-left-radius: 20px !important;
}
.banner .banner__media:nth-child(2){
    border-top-right-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
}

</style>

 

Hope my solution will help you resolve the issue.

 

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

poe1
Excursionist
21 0 4

It didn't work, I don't know why. 

PageFly-Noah
Shopify Partner
1283 228 261

Hi , please add and check again . I have open url and it have fixed:

PageFlyNoah_0-1712572611979.png

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

poe1
Excursionist
21 0 4

It only worked on one side and there is noBildschirmfoto 2024-04-08 um 12.41.16.png space between the image and the website border 😄

PageFly-Noah
Shopify Partner
1283 228 261

This is an accepted solution.

Ah, got it. If you want 2 image please add code above , if you want 1 image please add code below:

<style>
.banner .banner__media:nth-child(1){
    border-radius: 20px !important;
}
</style>

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

poe1
Excursionist
21 0 4

Thank you!

PageFly-Noah
Shopify Partner
1283 228 261

Thank you for response !

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.