Hello!
I want my pop up to have rounded corners instead of being straight.
This is how it looks now:
My website is: https://2ly0xfqvhlpa89xw-60150284501.shopifypreview.com and my theme is Stiletto
I would appreciate some help!
Topic summary
A user wanted to add rounded corners to their pop-up window on a Shopify store using the Stiletto theme. The pop-up initially had straight edges.
Desktop Solution:
- CSS code was provided targeting
.popup .popup__content-innerwith aborder-radiusproperty - This successfully rounded the corners on desktop view
Mobile Issue & Fix:
- The initial solution didn’t work on mobile devices
- A media query was added targeting screens under 749px width
- The CSS targeted
.popup .popup__contentwithborder-radius: 12px !important - This resolved the mobile display issue
Both solutions were confirmed working by the original poster. The discussion includes code snippets and before/after screenshots demonstrating the visual changes.
1 Like
It worked! Thank you so much!
It doesn’t work for mobile version, any solution?
@martujv can you please provide preview link again?
Yes, this is the preview link: https://aka1pndmq13ckn6l-60150284501.shopifypreview.com
@media screen and (max-width:749px){
.popup .popup__content {border-radius: 12px !important;}
}
1 Like
It worked! Thank you!