Design comparison
Solution retrospective
Any better way to do the responsiveness besides a bunch of media queries ?
Thanks in advance !
Community feedback
- @nkhatri7Posted about 3 years ago
Hey Igor,
First of all, the design and code look great! So one way of adding more responsiveness is using
vw
andvh
. These are relative units that respond to the dimensions of the viewport, sovw
is 1% of the viewport width andvh
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 acalc()
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 helpful1@igor-ostojicPosted about 3 years ago@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>
0@nkhatri7Posted about 3 years ago@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 helpful1 - @zaklinaradivojevicPosted about 3 years ago
Responsive text : https://bits.theorem.co/css-pro-tips-responsive-font-sizes-and-when-to-use-which-units/
Skoro sam i sama googlala o tome...
pozdrav
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord