Return to previous page

SVG image - by MJ - on WordPress WooCommerce support

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

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.

#303337 Copied Theme version: 8.0.6

5 Answers

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

#303370 Copied

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

#303536 Copied
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
#303619 Copied
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?

#303728 Copied
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
#303777 Copied
Tagged: designs, image, optimized, templates, woocommerce, wordpress
Viewing 6 results - 1 through 6 (of 6 total)