elementor
Image Widget with Link and SVG size override
Prerequisites
- [ x] I have searched for similar features requests in both open and closed tickets and cannot find a duplicate.
- [x ] The feature is still missing in the latest stable version of Elementor ( Elementor Pro. )
What problem is your feature request going to solve? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
When uploading SVG to and image widget and adding a link the width is set to 48px in CSS. It ignores size specifications from the widget. See frontend.min.css
.elementor-widget-image .elementor-image > a img[src$=".svg"], .elementor-widget-image .elementor-image figure > a img[src$=".svg"] {width: 48px;}
Describe the solution you'd like A clear and concise description of what you want to happen. Allow overriding the 48px width of svgs in image widget
Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered. Currently I write I add an width declaration via custom css
Additional context Add any other context or screenshots about the feature request here.
+1 long time and incomprehensible bug/feature, which was claimed to be solved but it isn’t.
+1. Just ran across this and issues with it on Facebook group go back quite some time. The 48px width overrides everything else and the only way to adjust it is custom css defining pixels. This is a problem since most of us use percentages for images.
So the problem here is that SVG's won't display with width: 100% and need a defined set of pixels? Why not do a default of 100vw instead, which seems to work, and do a fallback to 48px for older browsers?
I just ran into this in 3.0.10 Pro. This makes SVGs fairly useless; I don't want to have to train my customers to add some custom CSS class for each SVG image. Here's a screencast illustrating the issue: https://www.loom.com/share/bb92894a370c410a8111800298080cea .
Seriously elementor? This is not an April joke from thezenmonkey, it is real and still here!
Hello, I have this problem 😒
How to fix it vía CSS agressive? please share a solution, i not like to use PNG images please! only SVG
Thanks!
In fact the CSS selector .elementor-widget-image a img[src$=".svg"] should be removed from Elementor core. Otherwise the image width needs to be defined manually, which makes no sense.
+1
I wrote one line of css for quick solution. Add this as Custom CSS to fix this issue
/* elementor bug */ .elementor-widget-image a img[src$=".svg"] { width: auto !important; }
Yes please thanks for information.and keep it ups good plugins.
On Mon, May 30, 2022, 2:57 PM MeliMarie @.***> wrote:
This issue seems to still occur on Elementor Pro 3.7.1.
— Reply to this email directly, view it on GitHub https://github.com/elementor/elementor/issues/11031#issuecomment-1140952441, or unsubscribe https://github.com/notifications/unsubscribe-auth/AZKMDOYKCZYSNBJRY6DODH3VMSGHLANCNFSM4LZCF3WA . You are receiving this because you are subscribed to this thread.Message ID: @.***>
+5 Insert this as Custom CSS
/* elementor bug */ .elementor-widget-image a img[src$=".svg"] { width: auto !important; }
Does not work. For me, it hides the SVG completely...
Same here, the custom CSS hides the SVG, works when I insert a fix width and height, but that is not the solution we need.
Can confirm issue still exists with the latest Elementor Pro. It occurs when linking the logo. This override does work for me.
/* elementor bug */ .elementor-widget-image a img[src$=".svg"] { width: auto !important; }
I am surprised this is STILL an issue. This is overly opinionated CSS and I see no reason for it. SVGs can be used at all kinds of sizes, not just icons. Bad bad bad.
Can confirm issue still exists with the latest Elementor Pro. It occurs when linking the logo. This override does work for me.
/* elementor bug */ .elementor-widget-image a img[src$=".svg"] { width: auto !important; }
It does work for me! Cheers
This shrinking svg issue seems to still persist.
When the image in an image widget is an svg, adding links to the image widget will erroneously cause the image to shrink dramatically, breaking user's justified expectations.
• Elementor, would you please fix this issue?
Can confirm issue still exists with the latest Elementor Pro. It occurs when linking the logo. This override does work for me.
/* elementor bug */ .elementor-widget-image a img[src$=".svg"] { width: auto !important; }
auto didn't work, but 100% did and you don't even need an !important tag. Below is the code i used:
/* elementor bug */ .elementor-widget-image a img[src$=".svg"] { width: 100%; }
Correction: Both Auto and 100% cause issues on Mozilla so I can't recommend using either of these fixes. The only thing that works is removing the width:48px CSS which Elementor must do...
I cant imagine why anyone would write css that sets the width across all svg images. What bad coding practice.
I cant imagine why anyone would write css that sets the width across all svg images. What bad coding practice.
It's a workaround that seems to function correctly. Beats how Elementor hard-coded linked SVG dimensions...