@avinashdv
Posted
Hi, Nice work. I think you are a little confused with media queries, I would advise a few points that could make the website responsive, please consider these changes.
The below media query states that all the devices that starts from 375px. we can consider 426px instead of 375 as modern mobiles width is much higher than 375px. @media only screen and (min-width: 375px)
Change it to @media only screen and (min-width: 426px) All the code that we write in this media query will get applied to desktop as we stated the min-width 426 and above.
Now for mobile, use @media only screen and (max-width: 426px) All the code that we write inside this will get applied to mobile. It actually states that 0 to max:426 only.
Note: In the starter file, It is given that mobile and desktop as 375px and 1440px. Which therefore means the mobile responsiveness should start from 375px and below, above 375 it should be desktop.
Marked as helpful
@Ayodelearog
Posted
@avinashdv Thank you so much. So I should only use max-width: 426px for my mobile henceforth?