Media Queries - best practices for smooth transitions

Language Help CSS
1

Hi,

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

So far I’ve been doing something like that:

1st media query ends at 768px:

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

the next media query starts at 769px

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

Though, I am not sure if this is how it should be done - the transition - or if there is a better way.

Any tips to achieve smooth transitions are welcome.

Thanks :slight_smile:

2

Hi, there!

What I do, and would recommend, is that instead of creating queries at certain points, create queries where the design starts to break. If you’re starting with mobile design, which is recommended, the design “breaking” may mean that the text is starting to look a little small or the margin or padding amounts need to be bigger.

However, the more you build and create, the better you’ll get at understanding what is needed for each project. Once you become more familiar with certain design concepts, such as grid, flex, calc(), and clamp(), you may even find yourself using fewer media queries because your designs are naturally becoming more responsive and fluid.

Just keep trucking, and you’ll find your own style!

I hope this helps. :slight_smile:

Happy coding!~