Fix full height on mobile screens, close #62

[laurenziello]

[laurenziello]

@ArsalaBangash do you have some doubts about changes?

[ArsalaBangash]

Hi @laurenziello My apologies. I just got around to looking at this :)

When I opened the deploy preview on my phone, this is what I got:

What's the rationale behind min-100vh?

[laurenziello]

What's the rationale behind min-100vh?

With height: 100vh you fix the height of the page to be the same of the screen device without any scoll. With min-height: 100vh the page will have at least the same height of the screen device with scroll if it needs more space

[ArsalaBangash]

@laurenziello Thank you for the explanation. The changes you made work perfectly on the inspection window, but not on actual devices because of the URL bar. I wonder if there's a way to determine the available space on the screen and set the height accordingly.

[laurenziello]

@ArsalaBangash ok, I'll try this trick https://css-tricks.com/css-fix-for-100vh-in-mobile-webkit/

[laurenziello]

@ArsalaBangash just made some changes to fix mobile devices problem. Please check if it works. Could you please also add a label hacktoberfest-accepted in this pull request as described in this page?

https://hacktoberfest.digitalocean.com/hacktoberfest-update

[ArsalaBangash]

@laurenziello I made some refactoring changes to our project structure, which is now causing conflicts. I've added the label.