Jump to content

Auto Simple List Image Border Radius

Recommended Posts

Hello,

Need help fixing Auto Simple List - Image Border Radius. The border is off on images. Password: muse

used code below

.user-items-list-carousel .list-item img {
  border: 2px solid black;
  border-radius: 20px !important;
}

Edited by vnr
Link to comment
  • 1 year later...
On 8/8/2023 at 2:40 AM, angelaw said:

@tuanphan I would like to put the images in the list sections on the Offerings page in an arch shape and can't seem to get the css selector right. I'd also like to add a border to them.

Any help you can offer would be greatly appreciated. Thank you!

site is https://blessings-feng-shui.squarespace.com/

password: fengshui

 

 

I see you figured it out?

image.thumb.png.029f9ae78913f0eff5c02cdf9749a910.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 8/9/2023 at 11:52 PM, angelaw said:

@tuanphan no, it's actually for the list sections with the rectangle/squares, like:

 

image.thumb.png.c39d4536fbb65ed347af77105ffa5730.png

I'd like them to be an arch shape with a gold image border that I have. 

Thank you!

Hi,

Which page? I don't see it on homepage

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
1 hour ago, angelaw said:

@tuanphan It's on the Offerings page. Thank you!!

 You should remove this code.

section[data-section-id="623e1e98c93ecd145d147d29"] .list-item img {
  border: 7px solid transparent;
  border-image: url('https://static1.squarespace.com/static/6127dfababcd9726b9de8d1a/t/622f7a501e5bc6046c7d2975/1647278679044/AdobeStock_132072364.jpeghttps://static1.squarespace.com/static/6127dfababcd9726b9de8d1a/t/622f7a501e5bc6046c7d2975/1647278679044/AdobeStock_132072364.jpeg');
  border-image-slice: 1;
  padding: 25px;
}

 

After then add these code

section[data-section-id="623e1e98c93ecd145d147d29"] .list-item .list-item-media{
  border: 7px solid transparent;
  border-image: url('https://static1.squarespace.com/static/6127dfababcd9726b9de8d1a/t/622f7a501e5bc6046c7d2975/1647278679044/AdobeStock_132072364.jpeghttps://static1.squarespace.com/static/6127dfababcd9726b9de8d1a/t/622f7a501e5bc6046c7d2975/1647278679044/AdobeStock_132072364.jpeg');
  border-image-slice: 1;
  padding: 25px !important;
  box-sizing: border-box !important;
}

 

 

Screenshot_114.png

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
4 minutes ago, angelaw said:

@Web_Solutions  thank you so much!  This is what I see when I add that:

image.thumb.png.4f1b00fabef567cb2674e85d1eb03518.png

Any ideas??

 

First you need to remove these code

section[data-section-id="623e1e98c93ecd145d147d29"] .list-item img {
  border: 7px solid transparent;
  border-image: url('https://static1.squarespace.com/static/6127dfababcd9726b9de8d1a/t/622f7a501e5bc6046c7d2975/1647278679044/AdobeStock_132072364.jpeghttps://static1.squarespace.com/static/6127dfababcd9726b9de8d1a/t/622f7a501e5bc6046c7d2975/1647278679044/AdobeStock_132072364.jpeg');
  border-image-slice: 1;
  padding: 25px;
}

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
Just now, Web_Solutions said:

First you need to remove these code

section[data-section-id="623e1e98c93ecd145d147d29"] .list-item img {
  border: 7px solid transparent;
  border-image: url('https://static1.squarespace.com/static/6127dfababcd9726b9de8d1a/t/622f7a501e5bc6046c7d2975/1647278679044/AdobeStock_132072364.jpeghttps://static1.squarespace.com/static/6127dfababcd9726b9de8d1a/t/622f7a501e5bc6046c7d2975/1647278679044/AdobeStock_132072364.jpeg');
  border-image-slice: 1;
  padding: 25px;
}

After then add these code.

section[data-section-id="623e1e98c93ecd145d147d29"] .list-item .list-item-media{
  border: 7px solid transparent;
  border-image: url('https://static1.squarespace.com/static/6127dfababcd9726b9de8d1a/t/622f7a501e5bc6046c7d2975/1647278679044/AdobeStock_132072364.jpeghttps://static1.squarespace.com/static/6127dfababcd9726b9de8d1a/t/622f7a501e5bc6046c7d2975/1647278679044/AdobeStock_132072364.jpeg');
  border-image-slice: 1;
  padding: 25px !important;
  box-sizing: border-box !important;
}

 

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
13 minutes ago, angelaw said:

@Web_Solutions Thank you. I had but needed to hit refresh... is there a way to turn all those boxes into an arch shape as well?

Do you want add like this?

Screenshot_117.png

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
3 minutes ago, angelaw said:

@Web_Solutions taller rather than wider, but yes!!

You need to change the image ratio.  Then it will be taller rather than wider. And remove the previous code and add new code.

section[data-section-id="623e1e98c93ecd145d147d29"] .list-item .list-item-media{
  background: url('https://static1.squarespace.com/static/6127dfababcd9726b9de8d1a/t/622f7a501e5bc6046c7d2975/1647278679044/AdobeStock_132072364.jpeghttps://static1.squarespace.com/static/6127dfababcd9726b9de8d1a/t/622f7a501e5bc6046c7d2975/1647278679044/AdobeStock_132072364.jpeg');
  background-size: cover;
  padding: 7px !important;
  box-sizing: border-box !important;
  border-radius: 100% 100% 0px 0px;
  overflow: hidden;
  .list-item-media-inner {
    border-radius: 100% 100% 0px 0px;
  }
}

 

Screenshot_118.png

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
2 minutes ago, angelaw said:

@Web_Solutions Thank you so much! That worked perfectly!

You're welcome!

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
8 hours ago, melissaBOotfds said:

Hi! To add on to this, how would I go about placing a blue border like these ones around an image and text like this? The code I have been trying is not working...

Screenshot (52).png

Can you share your website URL?

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
6 minutes ago, melissaBOotfds said:

It's not public yet?

You can set a password and share it. See the video 

 

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

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.