Thumbnail display error and how to round thumbnail corners

1. When I choose 8px rounded corners, only the large image has rounded corners but the thumbnail does not have rounded corners, only the first and last images in the thumbnail are missing 2 corners like the attached image (this missing I see it as a bug), but the image in the middle is still square, how to apply 8px rounded corners to both the large image and all thumbnails at the same time

2. How to apply border to thumbnail like the attached image

Attachments:

You must be logged in to view attached files.

Hello,

Can you please share the product page URL so I will check and give you a possible solution?

Best Regards

here is the link to the product

Hello,

Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

.single-product .wd-gallery-thumb .wd-carousel-item {
border-radius: 20px;
}

Best Regards

.single-product .wd-gallery-thumb .wd-carousel-item {
border-radius: 20px;
}

This css helps the avatar and thumbnails to have 8px rounded corners and a border for the thumbnails, right?

Hello,

.single-product .wd-gallery-thumb .wd-carousel-item: Targets the individual thumbnail items within the product gallery on single product pages.

border-radius: 20px; Applies a rounded corner with a radius of 20px to the thumbnails.

Best Regards

after adding the code you sent, the result is still the same, the thumbnail is not rounded, the first and last images in the thumbnail are still missing 2 corners like images 1 and 2

and there is another problem, I want to have a border around the thumbnail, I added a css:
border-radius: 5px;
border: 1px solid white;
then the first and last images are missing the corner like image 3, if I adjust border-radius: 8px; then it won’t lose the corner but I only want it to be 5px rounded,

please help me:

1. Make a border around the thumbnail with a border thickness of 1px, rounded by 5px (no corner loss) and the thumbnails are spaced apart like the link I attached (I did it in theme settings -> single product -> gallery -> gallery gap 10px but it didn’t work), I want the effect when clicking on the thumbnail to be like the link I attached (only the border around the thumbnail is bright and the selected thumbnail is not dimmed

2. I want the product image area to take up 60% and the content next to it to take up 40% (I selected the image area that takes up a lot of area in the single product -> layout section but it didn’t work)

Attachments:

You must be logged in to view attached files.

Hello,

1. Please use the below custom CSS code:

.wd-carousel-wrap .wd-carousel-item.wd-slide-visible.wd-full-visible.wd-active.wd-thumb-active {
    border: 1px solid #fff;
    border-radius: 8px;
    opacity: 1;
}

.wd-carousel-wrap .wd-carousel-item.wd-slide-visible.wd-full-visible {
    border: 1px solid #fff;
    border-radius: 8px;
}

2. To check the layout issue, please share the WP admin login details of your site so I will check and solve the issue.

Best Regards.

when I use the css, the result is that the last image has no border, when I click on the thumbnail, the thumbnail is still blurred and the border does not change color as I want (image number 1 I attached), the thumbnails also stick together and do not separate as I want (image number 1 I attached), and when I round the border 5px, the image loses its corner

Attachments:

You must be logged in to view attached files.

Hello,

Please share your Site WP-ADMIN Login details in the Private Content field so that we can check this concern on your Site and help you out accordingly.

Best Regards

I send information

Please check and let me know the cause and then guide me on how to handle it myself so I can practice handling it myself to gain more experience.

Thank you very much

Hello,

Your given login details are not correct. Please share the correct logins.

Best Regards.

[dhndigitalmarketing]

Please use this password to log in again

• This reply was modified 1 month, 2 weeks ago by dhndigitalmarketing.

I sent my account back

After checking, please let me know the cause and guide me on how to handle it myself so that I can have more knowledge and be able to do it myself in the future.

Best Regards.

Hello,

1. Please add the below custom CSS code as well to show the border on the last thumbnail:

.wd-carousel-item.wd-slide-visible {
    border: 1px solid #fff;
    border-radius: 8px;
}

2. Please edit the single product layout in Elementor >> Then select the container and set the width of the container as per your requirements: https://ibb.co/720Pq8R

Best Regards.

[Author]

Posts