Auto Simple List Image Border Radius

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

Try this new code

.user-items-list-carousel__media-inner {
    border: 2px solid #000;
    border-radius: 20px !important;
}

This worked a treat! Thanks

@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

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?

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

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

Thank you!

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

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

 

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

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

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

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

Any ideas??

4 minutes ago, angelaw said:

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

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

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

@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?

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?

@Web_Solutions taller rather than wider, but yes!!

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

@Web_Solutions Thank you so much! That worked perfectly!

2 minutes ago, angelaw said:

@Web_Solutions Thank you so much! That worked perfectly!

You're welcome!

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...

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...

Can you share your website URL?

On 8/13/2023 at 5:45 AM, Web_Solutions said:

Can you share your website URL?

It's not public yet?

6 minutes ago, melissaBOotfds said:

It's not public yet?

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

17 minutes ago, Web_Solutions said:

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

 

Okay I'll watch this but in the meantime here is the code I've been tweaking and literally nothing happens:

#block-717935b965b1517def9a {
    border: solid 1px #119DA4;}
padding: 10;
}

https://pepper-elk-e9sh.squarespace.com/config/pages

123Go

Did you set the password?