SVG image - by MJ - on WordPress WooCommerce support

This topic has 6 replies, 3 voices, and was last updated 3 years, 1 months ago ago by Olga Barlow

  • Avatar: MJ
    MJ
    Participant
    September 24, 2021 at 09:35

    Hi
    i tried to use SVG file in my page “Design”. however, the image disappears in preview.
    can you please help? https://prnt.sc/1tfrcob

    Please, contact administrator
    for this information.
    5 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    September 24, 2021 at 14:08

    If you want to use .svg , change the Image element to Icon, for example – https://prnt.sc/1tgm244

    Regards

    Avatar: MJ
    MJ
    Participant
    September 27, 2021 at 07:28

    hi,
    1. i tried Icon box but still could not have the SVG. it appears as icon and when set size (360×360), the image disappears. I also could not set the title to the middle.
    2. furthermore, for image box, i would like to create corner ribbon that does not have gap on the sides. see below:
    https://prnt.sc/1tsmqg6
    Thanks

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    September 27, 2021 at 13:04

    Hello,

    1) I added banner with mask element and it allows to achieve the result you need better that icon box.

    2) Add the below custom to remove padding

    .mpc-ribbon-wrap {
        padding: 0;
    }

    Regards

    Avatar: MJ
    MJ
    Participant
    September 28, 2021 at 09:31

    Hi Thanks
    1. yes that is a better option.
    a. how can i use my custom class on this element? this gives a slower zoom effect.
    .img-hover-zoom img {
    transform-origin: 30% 20%;
    transition: transform 1.2s, filter 1s ease-in-out;
    }
    .img-hover-zoom:hover img {
    transform: scale(1.05);
    }
    b. in tablet sized screen, the image turn to rectangular instead of square with sharp edges. https://prnt.sc/1tx6nga
    and in all screen sizes, the img edge sharpen on hover.
    what i need is fixed size and rounded edges in all states (normal and on hover).

    maybe you have a better suggestion?

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    September 28, 2021 at 17:11

    Hello,

    a) Banner element does not have custom class option. You can add custom class for the column and use it to apply styles for the banner inside this column.

    b) Edit banner element and remove the min size for the banner.

    c) If you use zoom effect on hover then it won’t have border-radius because it’s image border-radius, not the banner block border-radius. So, you may try to add border radius for the banner element using custom code

    .banner {
        border-radius: 20px;
    }

    Regards

  • Viewing 6 results - 1 through 6 (of 6 total)

The issue related to '‘SVG image’' has been successfully resolved, and the topic is now closed for further responses

8theme customization service
We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.