Design comparison
SolutionDesign
Solution retrospective
I’m still a beginner so corrections would be appreciated. I also struggled with the attribution because when I set the media query for smaller screens, the attribution jumped to the middle for some reason and I tried but couldn’t fix it so I had to get rid of it completely
Community feedback
- @Zy8712Posted 12 months ago
Your site is pretty good. Main thing's I'd add/modify are:
- adding a
<main>
tag to wrap around your page's main content. This is for accessbility purposes - centering your container using flexbox. You can assign flexbox to your
body
. For example:
body{ display: flex; flex-direction: column; justify-content: center; align-items: center; }
- make sure you get rid of the
margin: 100px auto
from your container if you center it with flexbox - you should also add some hover effects for your buttons. For example:
button:hover{ background: transparent; color: white; border: white 2px solid; }
- your container also doesn't change into column format when in mobile layout, this might be due to your using a
max-width: 375px
so when I tested with a 375px screen size it doesn't work as it needs to be less than it. My suggestion is to make themax-width
around 420px. This way other mobile screen sizes are also supported.
Hope you find this feedback useful 👍
Marked as helpful1 - adding a
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord