However, I’ve tried checking on mobile devices and came up disappointed (iphone 8 for example). The x-axis was not showing the ticks or tick labels and the datapoints for the heatmap is limited to the leftmost part of the y-axis (not showing anything over the other year spans). Also, it’s not showing for previews on the codepen profile page in mobile as well.
I’ve tried some fixes I’ve found online like adding tags with utf, testing it on debug mode in codepen.io and removing unnecessary lines in the program to no avail. Has anyone experienced this issue on mobile and if so, how was it solved?
First of all congratz, you definitely achieved the result! ( by the way the debug view expires, here’s the correct link: Codepen - FCC HeatMap Project ).
I’d also suggest to use the same number of fractional digits for the reference average temp and the deltas
That said, what browser you used on your phone and on your pc? I’m using Opera atm and I see no problem ( just checked with my phone using Chrome: no problem again even if you have to navigate because it’s not responsive ^^ )
EDIT:
I reopened it now with mozilla, and the result match with your description ^^
i put a console.log(xAxisData) after its declarations and this is what i obtained:
Ah. Thank you sir and thank you very much for helping me troubleshoot this! I think I will try manually parsing the string and implementing your suggestion as well.
I used Safari and Chrome on iOS. I’ve also tested it with chrome on a Samsung Galaxy 8 but it didn’t reproduce the issue. Apple devices, you know…
