Chart squashed in mobile view and cards are squashed for large screens(4k)

adrianhajdin / project_corona_tracker

This is a code repository for the corresponding YouTube video. In this tutorial, we are going to build and deploy a corona tracker application. Covered topics: React.js, Chart.js, Material UI, and much more.

https://covid19statswebsite.netlify.com/

1.45k stars 476 forks source link

Chart squashed in mobile view and cards are squashed for large screens(4k) #16

Closed mrshawnhum closed 4 years ago

mrshawnhum commented 4 years ago

I seem to have a hard time adjusting the line chart to accommodate for mobile use or the cards for 4k. Any suggestions?

picture examples below:

chiragobhan commented 4 years ago

I have fixed some front-end responsiveness in this project. Check this and let me know if it helps:
Repo: https://github.com/chiragobhan/react-covid-tracker
Live Demo: https://chiragobhan.github.io/react-covid-tracker/

mrshawnhum commented 4 years ago

Your 4k resolution on your site is great! Mobile view still pretty squashed together on the numbers

chiragobhan commented 4 years ago

Oh. Well, at least the 4k issue is resolved. For mobile, you can fork my repo and goto "src/components/Chart/Chart.module.css". Now increase the following value (underlined in red) unless you are satisfied. Feel free to use "px" or "rem" instead of "%" if needed. This will help you resolve the chart labels (numbers) for mobile devices.

Chart

mrshawnhum commented 4 years ago

Looks great! Thank you! I will be sure to leave a star on your repo!