Social Buttons Too Small

https://ibb.co/8LH1VJgC
https://ibb.co/DS3y6gL
I used the shortcode [social_buttons] to set social media icons in the footer, but I found that the icon size cannot be adjusted; it’s too small. How can I solve this problem? Also, is there a way to adjust the icon’s color?

Hello,

Try to use our theme widget in the footer and in the style tab change the icons size and color as per your requirements.
https://ibb.co/XZJybJzQ

Best Regards,

1.Your component doesn’t have the Instagram icon. How do I fix this?
2.On mobile devices, can the slider be set to have 2 columns and 2 rows per page, displaying 4 products per page? I see that the Grid mode can be set to two columns and two rows, but the Slider mode can only be set to one row.
https://ibb.co/0jqdBTcp

Hello,

01. Can you please share the page URL so I can further check on your site and give you a possible solution?

02. It only allows 1 row per slide by default. The “rows” option is only available in Grid mode, not carousel mode.

Best Regards,

01.I have already solved this problem.
02.https://ibb.co/V0sxdRwQ
When I use this SVG image as the category image for Product Categories, I find that the image is missing from the Product Categories Elementor display in WPBakery. How can I solve this problem? Why is the image missing?

https://ibb.co/Dgp8yvL9
Topic does not allow me to upload SVG images, but you can see that my SVG images are complete and intact when viewed on my computer. However, when uploaded to Product Categories thumbnails and used with your Product Categories Element, the images appear to be missing for unknown reasons.
If you need SVG images for testing, I can send you the download link.

Hello,

Could you please elaborate on your concern more with some useful screenshots for better understanding that demonstrate the problem so we can understand and reproduce it on your website.

Also, 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,

No screenshots are needed for this issue. You only need to upload the image I sent you to see the problem with the image display. You can see that the circle has been cut off by about 1 or 2 pixels. I later solved this problem using custom CSS. Below is the CSS code for reference.
.categoryimg img {
width: 38px !important;
height: 38px !important;
/* 核心修改开始 */
padding: 2px !important; /* 四周向内缩 2px，留出安全距离 */
box-sizing: border-box !important; /* 关键！确保 30px 包含了 padding，否则总宽度会变成 34px */
/* 核心修改结束 */

object-fit: contain !important;
object-position: center !important;
}
However, there’s a problem: if I want to set all product category images to be indented by 2px, what CSS class should I choose? I think this is a bug in the Woodmart theme, because Woodmart directly enlarges the images by 1px or 2px, causing the category images to be displayed incompletely.

Hello,

Sorry to say, I do not fully understand your issue. Could you please elaborate on your concern more with some useful screenshots for better understanding that demonstrate the problem, so we can understand and reproduce it on your website?

Best Regards,

https://ibb.co/1GWP2jZP
https://en.wikipedia.org/wiki/Brentford_F.C.#/media/File:Brentford_FC_crest.svg
https://ibb.co/pjDbZgDw
I don’t know if you’ve tested it as I described. I think I’ve explained it clearly enough. Click the link to see the images I mentioned. You can see that the images I downloaded from the website are complete, but when uploaded to WooCommerce’s Product Thumbnail, they don’t display completely in the Woodmart theme. You can carefully examine the product category thumbnails on the website.

To see the problem I mentioned, you can also directly download images from Wikipedia and test the display of product category thumbnails on your website.

Hello,

Try to use this Custom CSS code.

.product-category img {
    width: 95% !important;
    height: auto !important;
    padding: 2px !important;
    box-sizing: border-box !important;
    object-fit: contain !important;
    object-position: center !important;
}

This works because the width is set as a percentage and box-sizing: border-box ensures that the padding is included within the image container. As a result, the images now display completely with a small safe space around them, without being cut off.

Best Regards,

[Author]

Posts