You don't need the @media (max-width: 600px) {...} part, because your non responsive code should work everywhere. Then starting from the @media (min-width: 600px) {...} and up, you apply changes to your base code for each specific break point, where you overwrite certain parts.
Hello, I am kunaal a fullstack developer.I have a youtube channel "Modern Web" where I teach to make awesome web UI/ UX. Don't forget to checkout my youtube channel
Hello, I am kunaal a fullstack developer.I have a youtube channel "Modern Web" where I teach to make awesome web UI/ UX. Don't forget to checkout my youtube channel
You don't need the
@media (max-width: 600px) {...}
part, because your non responsive code should work everywhere. Then starting from the@media (min-width: 600px) {...}
and up, you apply changes to your base code for each specific break point, where you overwrite certain parts.Yes but I didn't said you need all of these, these are just some common breakpoints.
Indeed, depending on where you start you might have for desktop first:
@media (max-width: 1200px)
@media (max-width: 992px)
@media (max-width: 768px)
@media (max-width: 576px)
while for mobile first you can have:
@media (min-width: 576px)
@media (min-width: 768px)
@media (min-width: 992px)
@media (min-width: 1200px)
Yes, I agree. Well what you prefer mobile first or desktop first. I prefer desktop first btw.😅😅
I prefer mobile first coz it makes ur life easier and reduces repetition of styles