@Zukizuk
Posted
Hello there
Your solution looks nice
I have few suggestion that i think might interest you.
You can make it responsive by using media queries like you did but use this instead
@media only screen and (max-width: 480px) {
/* Media query styles */
}
The max-device-width targets the device's screen width, and it might not work as expected for all devices. Instead, use max-width to target the width of the viewport.
Better still you can start by doing the mobile design first and using media queries for the desktop(mobile first approach) which is also a good practice in writing you styles.
@media (min-width: 64rem) {
/* Desktop styles */
}
Also put this
*{
margin: 0;
padding: 0;
}
at the very top of your css not in the media queries. You need it in both mobile and desktop version.
Again, consider using semantic html like <main></main> for the div with the class main.
Marked as helpful
@TheTreeveloper
Posted
Oh wow, I didn't think I could even start with the mobile version first and make it responsive for desktops. Thank you so much for your helpful comment. I also hope I setup my GitHub well enough.
Thank you very much, I recently learnt about semantics and will sure start putting them to use. @Zukizuk
@Zukizuk
Posted
@ioddgamers Using mobile first approach is kind of a norm in web development. Most people do that, me included. If you check the README.md file we are provided with. You will see mobile-first workflow under the #Built with section.
It has some advantages to it too, example Since mobile phone is not performant as desktop or laptop, writing mobile styles first and putting the desktop styles in the media queries makes the browser skip the desktop styles when it reaches the media query thus improving performance.
Marked as helpful
@TheTreeveloper
Posted
Thank you so much, I still have so much to learn and you have taught me something in a short time. I will be taking this approach in my future projects for sure now. :)@Zukizuk
