Jump to content

Is there code to round corners for a promotional pop up -including the image?

Go to solution Solved by paul2009,

Recommended Posts

  • Replies 8
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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! 🙂

 

 

image.thumb.png.d73531a25a5e862779f6af097f4ebd41.png

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 plugin
If 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
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 plugin
If 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

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
 
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
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
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;
}

image.thumb.png.ad66e0bb45938c69dee23a23dcd82a16.png

Did this help? Please give feedback by clicking an icon below  ⬇️

Edited 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
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;
}

image.thumb.png.ad66e0bb45938c69dee23a23dcd82a16.png

Did this help? Please give feedback by clicking an icon below  ⬇️

Thank you so much! This works perfectly! Thank you ☺️ 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.