Design comparison
Solution retrospective
The most difficult part for this project was the responsive part. My code works well in the browser and when I resize the screen in the inspector, but when I open it in my phone (iPhone 14 Pro) it doesn't work. I would really appreciate any advise.
Community feedback
- @JIH7Posted about 1 year ago
It actually looks good for me on Firefox for Android! Wish I had an iPhone to test it on and see the issue myself.
Some other things worth noting though, practicing semantic HTML is always a good thing to do. This is just a small component so there's not a ton of use for semantic tags, but one major one is that the
<div>
with the.main-container
class should maybe be an<article>
instead. Using semantic tags instead of regular<div>
's when applicable is great for people using screen readers.Here's an article on semantic tags!
Also it's generally good practice to avoid
!important
in CSS. Try using a more specific selector instead when possible.Marked as helpful0
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