@BBualdo
Posted
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
or min-width
instead of width
. Same rule for height. And try to set it with vw
and vh
instead of px
.
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 helpful
@Promise-Wonte
Posted
Many thanks @BBualdo. I would like you to know that this was super helpful and I appreciate it.