Black Lives Matter. Please consider donating to Black Girls Code today.

Creating different views for smaller screens

I am trying to use plotly to create a website that contains some mobile friendly plots using plotly.js. I came across this great article: https://medium.com/@plotlygraphs/creating-crisp-charts-for-mobile-c8266895c01
Where I learned how to use the views functionality, to create a special view for my plot when its width gets to 480px; however, I am unable to find any information on how to do this using plotly.js.
In other words, in plotly cloud platform (here:https://plot.ly/~mm.ammansour/5/) I was able to create two distinct views, one for desktop and one for mobile, but I wasn’t able to figure out how to do this in my own website using the plotly.js library.
I tried exporting the graph from the cloud platform to an HTML file, I found some interesting properties like “frames”, and “breakpoints” that seem to relate to this, but I couldn’t find any information about them in the documentation; moreover, the downloaded HTML file shows a different behaviour from what’s on the cloud; on the cloud, when I resize the graph it switches to my small view adapting to the new text, margin, and legend configurations, but when I resize the downloaded HTML file, it just scales the plot and doesn’t show my special settings for the small view.

Thanks in advance for any help you’d be able to provide.

See Breakpoints in plotly.js? for more details.