Home Forums WoodMart support forum Social Buttons Too Small

Social Buttons Too Small

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #703083

    ha21cn
    Participant

    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?

    #703155

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    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,

    #703252

    ha21cn
    Participant

    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

    #703303

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    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,

    #703390

    ha21cn
    Participant

    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?

    #703391

    ha21cn
    Participant

    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.

    #703443

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    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,

    #704285

    ha21cn
    Participant

    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.

    #704327

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    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,

    #704460

    ha21cn
    Participant

    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.

    #704535

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    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,

Viewing 11 posts - 1 through 11 (of 11 total)