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