Design comparison
Solution retrospective
please can someone explain responsiveness and how I can apply it on both mobile and desktop? thank you!
Community feedback
- @BBualdoPosted over 1 year ago
Hi, if you want to set different styles on different screen size you have to use media queries.
To do this you can wrap all your styles in:
@media (max-width: 400px) { ***your styles*** }
It means that all of your styling will be applied until page width crosses 400px.
So you can copy all your styles twice. One for
@media (max-width: 400px) {}
and one for@media (min-width: 401px) {}
and then just style it for desktop. In that the changes won't be applied for Mobile View.And about responsiveness I have one advice: Avoid hard height and width settings of the elements unless you really have to do it. Pages are responsive by default. But if you have to do it temporarly, use
max-width
ormin-width
instead ofwidth
. Same rule for height. And try to set it withvw
andvh
instead ofpx
.vw is ViewportWidth (100vw means it will always have width equal to page width). vh is ViewportHeight (100vh means it will always have height equal to page height).
Good luck!
Marked as helpful1@Promise-WontePosted over 1 year agoMany thanks @BBualdo. I would like you to know that this was super helpful and I appreciate it.
1 - @AllearedPosted over 1 year ago
You need to use Media Queries for that. You use Media queries to determine how the page is going to behave in a determinate size. But you have to code every possible screen size you want to add.
The one you've done now should be inside a media query with a width of 400px or so. You just need to code the desktop version now. Remember that the desktop version comes first in the Cascade, and the mobile version comes after.
Marked as helpful1@Promise-WontePosted over 1 year agoMany thanks @Alleared. I will do well to effect this feedback. I really do appreciate your comment.
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