When developing any website, always run a visual test on the mobile widths and heights.
To do that in Chrome or the new Chrome driven Edge, press F12.
Then click on the icon shown above.
This brings us to this screen.
Test the different widths and heights until you feel everything is good. Then push your changes to the website.
Over time, you will know in advance what works and what doesn't work and should be able to get the layout right the first time; however, don't skip these tests as they will give absolute confidence on what is being published.
Reason
Desktop development is great! But it doesn't cover these sizes.
Tips:
display: grid;
grid-template-columns:
repeat(auto-fit,
minmax(3em, 1fr));
margin-bottom: 1vh;
justify-self: center;
padding-top: 30vh;
font-size: 4vh;
Using Grid works well but make sure to include minimum width (3m) etc. to get the proper breaking points.
Also, for margins, padding, and font-sizes use (View Height) 'vh' instead of 'em', 'rem' because they target specific window sizes.
JWP2021
Top comments (1)
Interesting post !