![](https://cdn.userecho.com/characters/104.png?1)
Avatar Canvas Error when responsiv within react
Hello,
currently we implement the SitePal avatar within our React Website and everything works complelty fine. But if I want to make the Avatar more reponsive, by changing the last digit to 1, i get the following error:
This is how we integrate the Avatar currently:
Answer
![](/s/cache/75/98/75984922e836d352037eb1229945dc7a.png)
Thanks for reporting the issue.
We'll look into it and advise.
Stay tuned...
Regards,
Gil
The SitePal Team
![](/s/cache/75/98/75984922e836d352037eb1229945dc7a.png)
Hello!
Our engineering looked at this issue. We implemented a React test page with a responsive character in it.
We did did not encounter this (or any) problem.
On Monday I intend to follow up & share a link and the source code for our example.
If you could do the same & share React project & source code - that would be very helpful & enable us to better advise.
Thanx!
![](https://cdn.userecho.com/characters/105.png?1)
Hello i was able to pinpoint the error. It gets triggered when you style the component. Please check my code snippet:
![](/s/cache/75/98/75984922e836d352037eb1229945dc7a.png)
Hello!
Thank you for this info.
Just to clarify - are you saying that when you remove the style statement it works fine?
![](https://cdn.userecho.com/characters/105.png?1)
yes correct! Is it possible that you modify your react example code, because when I change the parameter to responsive in your example the „responsive“ mechanic does not work
![](https://cdn.userecho.com/characters/105.png?1)
Hello,
I modifed your example project which reproduces the bug. You can find it under 2dface. Here the git repository.
https://github.com/hhussein97/SitePalResponsiveTest
![](/s/cache/75/98/75984922e836d352037eb1229945dc7a.png)
Our engineering looked into this issue today and advised that our React JS example code does not contain the div with this style code. Here is a screenshot of our sample code, which can be found here -
https://sitepal.com/api/examples/react/index.html
Please check and let me know where that style code came from - if it is posted somewhere on our site we will revise.
Best,
Gil
![](https://cdn.userecho.com/characters/105.png?1)
Hello Gil,
Yes, it is true that the style does not come from your sample code. I have added these styles to show you that the error is also reproducible in your sample code. Im looking on a solution how to add styles to the SitePal Avatar aswell as making it responsive, because your responsive flag does not work.
![](/s/cache/75/98/75984922e836d352037eb1229945dc7a.png)
Hello!
We've implemented a responsive react JS example for your reference.
In this example we positioned the SitePal character in a realistic web page, with actual content & style.
The example can be found on our support page - www.sitepal.com/support
Here is a direct link - https://sitepal.com/api/examples/react-responsive/index.html
There's a download link on the page itself (at the bottom) - where you can download the source of this page.
Please review, and see if you can use the same methodology.
I hope this will be helpful.
Let me know how goes.
Best,
Gil
![](https://cdn.userecho.com/characters/105.png?1)
Hello Gil,
thank you for your response but the download link you provided does not work. Can you check again, sorry :(
Regards
![](/s/cache/75/98/75984922e836d352037eb1229945dc7a.png)
Apologies.
Please use this link -
https://sitepal.com/api/examples/react-responsive/source_code/React%20-%20Source%20Code.zip
Customer support service by UserEcho
Hello!
We've implemented a responsive react JS example for your reference.
In this example we positioned the SitePal character in a realistic web page, with actual content & style.
The example can be found on our support page - www.sitepal.com/support
Here is a direct link - https://sitepal.com/api/examples/react-responsive/index.html
There's a download link on the page itself (at the bottom) - where you can download the source of this page.
Please review, and see if you can use the same methodology.
I hope this will be helpful.
Let me know how goes.
Best,
Gil