ElodieCW Posted December 12, 2022 Share Posted December 12, 2022 Hi, I've used code to round the corners of a promotional pop up. However, only the bottom right and top right corners are rounded. The other side has an image attached and I cannot figure out how to code it right. Any help would be appreciated. Thank you! :) Link to comment
Beyondspace Posted December 13, 2022 Share Posted December 13, 2022 9 hours ago, elloello said: Hi, I've used code to round the corners of a promotional pop up. However, only the bottom right and top right corners are rounded. The other side has an image attached and I cannot figure out how to code it right. Any help would be appreciated. Thank you! 🙂 Can you share your site with the protected password so I can take a look? Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
ElodieCW Posted December 14, 2022 Author Share Posted December 14, 2022 17 hours ago, Beyondspace said: Can you share your site with the protected password so I can take a look? Hi, the website is https://sawfish-viola-zxks.squarespace.com/config/ and the protected password is JC3atRCdJgqY6DZ The site is not live. Apologies for the delay, really new here. Thank you! Link to comment
Beyondspace Posted December 14, 2022 Share Posted December 14, 2022 6 hours ago, elloello said: Hi, the website is https://sawfish-viola-zxks.squarespace.com/config/ and the protected password is JC3atRCdJgqY6DZ The site is not live. Apologies for the delay, really new here. Thank you! I can not see this pop-up. Did you turned it off? Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
bycrawford Posted December 14, 2022 Share Posted December 14, 2022 I can't seem to check your site out with the URL provided, but if your code looks something like this... .pop-up-target-id { border-radius: 20px; } Then try putting something underneath that looks like this: .pop-up-target-id img { border-radius: 20px 0px 0px 20px !important; } Sam Crawford | by Crawford. Multi-award-winning Squarespace expert e. sam@bycrawford.com w. bycrawford.com Sign up to the waitlist for my course 👇sixfiguresquare.space Did my comment help? To help others benefit, leave a like and mark my answer as 'best'. This lets users scroll straight to the solution they need. Link to comment
ElodieCW Posted December 14, 2022 Author Share Posted December 14, 2022 8 hours ago, Beyondspace said: I can not see this pop-up. Did you turned it off? Hi, the pop up should work now. There was an issue with the display! Sorry Link to comment
ElodieCW Posted December 14, 2022 Author Share Posted December 14, 2022 3 hours ago, bycrawford said: I can't seem to check your site out with the URL provided, but if your code looks something like this... .pop-up-target-id { border-radius: 20px; } Then try putting something underneath that looks like this: .pop-up-target-id img { border-radius: 20px 0px 0px 20px !important; } Hi, Thank you! I've tried adding these now and unfortunately it still keeps coming up with only two rounded corners. Not sure what I'm missing? Thank you! Link to comment
Solution paul2009 Posted December 14, 2022 Solution Share Posted December 14, 2022 (edited) 57 minutes ago, ElodieCW said: I've tried adding these now and unfortunately it still keeps coming up with only two rounded corners. You need to add a border-radius to the left side of the other elements too, like this: .sqs-slide-wrapper[data-slide-type="popup-overlay"] [data-slice-type="gallery"].sqs-gallery-design-stacked:not(.sqs-gallery-grid), .sqs-slide-wrapper[data-slide-type="popup-overlay"] [data-slice-type="gallery"] .sqs-slice-gallery-item.loaded img { border-radius: 25px 0 0 25px; } Did this help? Please give feedback by clicking an icon below ⬇️ Edited December 14, 2022 by paul2009 About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links. Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.Improve your online store with our extensions. Link to comment
ElodieCW Posted December 14, 2022 Author Share Posted December 14, 2022 24 minutes ago, paul2009 said: You need to add a border-radius to the left side of the other elements too, like this: .sqs-slide-wrapper[data-slide-type="popup-overlay"] [data-slice-type="gallery"].sqs-gallery-design-stacked:not(.sqs-gallery-grid), .sqs-slide-wrapper[data-slide-type="popup-overlay"] [data-slice-type="gallery"] .sqs-slice-gallery-item.loaded img { border-radius: 25px 0 0 25px; } Did this help? Please give feedback by clicking an icon below ⬇️ Thank you so much! This works perfectly! Thank you ☺️ Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment