m
20d ago

riv. File not shown in the correct size

Dear Rive Specialists,

I have a problem with the correct display of the .RIV file in a WordPress/Divi Builder area.

Upload, enter code in the container. The file is displayed and the interactive works perfectly. Everything is wonderful.

Only the .riv file does not adapt to the container but also protrudes. See screenshots. Very strange.

To my defense I am not a programmer and have taken over the code from the Rive website.

For the customer I created a high -format variant for the cell phone. He loads them in 100 percent and it is displayed tiny.

Maybe someone has a solution. How the code must be adjusted so that the file must be displayed in the correct size.

Best regards and thank you

Michael

3 replies
m
20d ago

Hi ! Shared this with our developers, they'll reach out to help you soon. Cheers!

20d ago

Hey , we have an example here that you can take a look at below.

The size of the graphic is determined by the size of the HTMLCanvas. You can also make sure that the graphic is redrawn when the window resizes:

window.addEventListener(
  "resize",
  () => {
    riveInstance.resizeDrawingSurfaceToCanvas();
  },
  false
);

For your use case the minX, minY, maxX, maxY isn't necessary. See the link below for an example of using Layout. You can read up more on laying out your animation here: https://rive.app/community/doc/layout/docBl81zd1GB

m
19d ago

Dear Gordon,

thank you for the quick reply. I tried but it doesn't work.

This is the rive sharing link how it should look like.
https://rive.app/s/pUK49kvKfEqlihWZW8zjPw/

It works wonderful but the client needs the .riv file embedded on his Website.

And here is the link how it look when embedded on a test site:

https://www.mgl-design.de/rive_4_7/

It stays that big even if I reduce the website.

The code = code.png

size01 + size02

Thank you and sorry

Michael