Fightpandemics: Fix home page sizing to fit different screen

[ppagarawal]

As a User, I want to have consistent UI experience across devices.

Currently, the components of the homepage are not proportionate to the different screen sizes. The frontend needs to be proportionate across screens. This change has to be implemented across all the different features.

Eg:

@Yu-Alexa-Zhao Can you please share the proportion of the component in the screen.

[pthoma14]

@ppagarawal this is a great issue! Thanks for logging this.

Maybe for these UI type issues we don't use the "MVP-Critical" tag but rather "MVP-Release 1" and "Good First Issue" tags

Thoughts?

[Yu-Alexa-Zhao]

Is it possible to -
1) For both the left and right sections to take up the entire height?
2) Ideally the two boxes would take up to 75% of the height of the div ...

Not sure if I am being descriptive here...

[Joeu]

@Yu-Alexa-Zhao , can you check how it is now in https://staging.fightpandemics.work/ and give you thoughts about it? I just pushed a fix for other issue that deals with this blue part on the home page.
I'd also like to know which screen sizes we are going to support, so we can change the proportions using the font-size approach.

@manualzuru , @ppagarawal , @galeza , @idjevm , @robinv85 , are we supporting 4k resolutions?

[Yu-Alexa-Zhao]

Yes I think the design now makes perfect sense to me

[idjevm]

I am not sure about supporting 4k resolutions, I mean I guess we should consider having a bit screen resolution but most probably will ok without 4k res.

[Joeu]

I made a lot of changes to deal with sizing and proportion. Now we are able to set the proportion by adjusting the font-size in the GlobalStyles.js file.

@idjevm , @jyclam , @manualzuru , @Yu-Alexa-Zhao , @ppagarawal , please check and make comments regarding the screenshots below (representing 4k screens):

[ppagarawal]

This looks good @Joeu
How will the other pages like feed, post, profile look like? Will the changes be applied there as well?

[ppagarawal]

Also we may need to change the 'view more' button depending on screen size apparently, in the future releases

[Joeu]

This looks good @Joeu
How will the other pages like feed, post, profile look like? Will the changes be applied there as well?

I uploaded prints for those pages too, @ppagarawal .

[ppagarawal]

We should be good. I assume that these changes are being applied globally.

[Joeu]

Yes. Since the elements are using rem units.