Hello all!
Please help me out to make my page responsive because i got really confused. I’m just learning and tried a lot but can’t find the proper way to make it RESPONSIVE.
Will be very grateful for a hint or a solution!
Thanks in advance dear colleagues!
Link to the live site on GitHub: Keyboard
Link to the repository on GitHub: GitHub - DumitruCiobanu/Keyboard-layout-UI
For each screen size you want your page to be responsive, you have to define @media query with all the properties adapted to that screen size.
If you want the keyboard to be responsive for the screen size with max-width set to some value, add the properties that you have to change to make your work visible on, for example, the following screens:
@media (max-width: 456px) {
Change all the necessary properties within the media query in order to make
good-looking pages on screens up to 456px width
}
It is just guidance. I hope something can be of help.
P.S. For this kind of work it is better to start with mobile screen sizes first:
“Mobile-first design is a design philosophy that aims to create better experiences for users by starting the design process with mobile devices, often the smallest of screens, first. This means that when a designer sits down to prototype or sketch a website layout, they begin with how it will look on a mobile device screen and then move on to bigger screens.”
Thank you for the answer!
I know how @media works, i just don’t find the right selectors, properties and values to adjust it.
