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? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, 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? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, 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 💸 Speedrun your first $100k as a Squarespace designer: sixfiguredesign.club📱 Hire me to build your Squarespace website: calendly.com/bycrawford/call 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: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. 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