Has anyone had issues with their page Hero image not displaying correctly when courses are viewed using FireFox? Loads perfectly okay in Chrome but it appears to be scaling up on Firefox. The Width and Height are disproportionate. The title is displaying correctly but the graphic is not displaying correctly.
@Lennie2024 are you using an SVG image by any chance?
@Lennie2024 are you using an SVG image by any chance?
Yes I am using SVG.
That’s going to be why… SVG images don’t actually have an intrinsic width or height like other image types - as they are designed to be rendered at any size you want.
The three main browser rendering engines* therefore all report completely different value for the width and height of an SVG - and Firefox for some reason says it has NO width or height, which means Evolve is therefore unable to determine what aspect ratio to use when rendering an SVG as a Hero Image - leading to the odd behavior you’re seeing.
Unfortunately there is little we can do about this other than to recommend you use a PNG image instead of SVG.
* Blink: Chrome, Edge, Brave, Opera etc; Webkit: Safari; Gecko: Firefox
1 Like
Aah, that’s a pity about firefox not playing nicely! 
I’d prefer to stick with SVG if possible. What if I add the width and height to the svg file? I could remove the hero image for mobile view to take care of potential responsive issues, unless of course I add more CSS to take care of smaller viewports. Don’t really like editing the SVG if I can help it but it might be a workaround.
I have a feeling that I did try that last time this issue came up - and it didn’t make any difference. But that was a while back (2023) so it might be worth a try just in case Firefox has made some improvements..?
1 Like
