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.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.