HTML image editing

@Kelly Are you resizing the .gif, or the widget? Making the widget min-height a bit taller should help with the scroll bar.  I’m not sure what would make the white space go away.

Do you need to use the .gif format (due to motion, etc.) or can you try a .jpg/.png format?

I recently ran into this issue using the HTML widget to display a gif that was linked to another page within Docebo - in order to fix it, I had to use CSS.  It took me a long while to figure it out, but this is what eventually worked for me:

style.htmlwidget .content-img {

    max-width: 100%;

    height: 100%;

Thanks for this. I need the widget to also match the size of the others on the page. Yes, i need the motion of the GIF 

Because of your need to set the widget to the same height, is the image itself set to the same size? Is the GIf the same size? scrolls show up when your content is larger than the container, so is it possible that the image has a gap space, even a transparent one underneath it not being accounted for? 

I don’t know why this isn’t working for me!

I have a GIF in HTML because I want the image to link to a course catalog, but it has a scroll bar. If I set the widget height, it is no longer responsive to screen size.

I used this CSS in my brand configuration and it is still showing a scroll bar.

I just looked at my widget set up.  I used this CSS, as mentioned, and did NOT include a widget height in my widget itself.

This was the coding I used for my HTML widget which was a 2/3 page widget I was trying to match height with an image widget:

<a href="TARGETPAGELINK" target="_blank" rel="noreferrer noopener"><img style="display:block;margin-left:auto;margin-right:auto;" src="GIFLINK" alt="ALTHOVERLANGUAGE" width="1000" height="482" /></a>

PUUUUURRRRRRRRRRFect! Like a cat birthday! Thank you! This worked! Beautiful.