Media queries - best practices for smooth transitions


I wanted to ask what are some best practices to achieve smooth transitions.

For example with the registration form project I am unsure about my transitions.
This is the live preview Live Preview

The default form width is 40%.

1st media query for mobiles:

@media (max-width: 425px)

and form width 80% (small screens)

2nd media query for tablets:

@media (min-width: 426px) and (max-width: 768px)

and form width again 80%

3d media query for laptops

@media (min-width: 769px) and (max-width: 1024px)

and form width 65%

4th media query for very large screens

@media (min-width: 1025px)

and form width 50%

Though, I am not sure if this is how it should be done - the transition - or if there is a better way. If you have noticed each media query starts 1px above the previous.

Any tips to achieve smooth transitions are welcome.

Can you give me some feedback especially if you are using a large screen, increase and decrease the width of the window and give me your opinion.

Thanks :slight_smile:

You can look at this article it lists out the common break points for device widths. So you be able to use these to make the smooth transitions from one device to the other

1 Like

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