@nkhatri7
Posted
Hey Igor,
First of all, the design and code look great! So one way of adding more responsiveness is using vw and vh. These are relative units that respond to the dimensions of the viewport, so vw is 1% of the viewport width and vh is 1% of the viewport height. Now I wouldn't recommend using these relative units on their own, it's probably better to use them along with a base size in a calc() function (e.g. calc(10rem + 10vw)).
P.S. I noticed in your HTML file you used the <head> tag inside your main, I'm assuming you wanted to use <header> instead?
Hope this helps :)
Marked as helpful
@igor-ostojic
Posted
@nkhatri7 Thank you so much for the advice Neil !
The biggest issue I have is making the design fit on all the available devices that are shown in the Chrome Dev tools.
For example it looks great on iPhone X, but too cramped on iPhone 6/7/8 Plus or Galaxy Fold.
So i am trying to learn the best practices for responsive design with writing as few media queries as possible.If you have any good tutorials to link regarding that it would be very helpful !
And yes you are right, i meant to use <header> not <head>
@nkhatri7
Posted
@igor-ostojic Yeah I think when working with mobile views, using vw is really useful, so the sizing of components/text would increase and decrease with the width of the mobile, and therefore making it less cramped on the smaller mobile devices.
Unfortunately I don't have any good tutorials to link at the moment but hopefully this helps a bit!
Marked as helpful
