I was reading about flexbox, and was also watching youtube videos
Design comparison
Solution retrospective
Do you think my code is ok? I appreciate any advice or help.
Community feedback
- @jesuisbienbienPosted over 2 years ago
Hi Federico,
Your website looks great. One thing I'll add to your code is the overflow property. Your website right now have a scroll bar on the right, which isn't necessary. To get rid of that, just add to the body:
overflow:hidden;
Hope it helps.
1@federico-madridPosted over 2 years ago@jesuisbienbien Hello! thanks for your feedback i really appreciate it i try to hide the scrollbar in the body but its not working :(
0 - @DarrickFauvelPosted over 2 years ago
Hi @federico-madrid, 👋
Congratulations on posting your first solution! 🥳
To fix the accessibility issue in the accessibility report (see above ⬆️), you will have to change your
h3
elements to something else. The report is saying that if you use anh1
element on your page, the next heading element you can use ish2
, which is a valid increment of +1.However, I would recommend that you use a
<span class="metric-count">
element. Also, I would do something similar for the<p>
tags and replace them with<span class="metric-label">
. Try this:<div class="metrics"> <div class="metric"> <span class="metric-count">80K</span> <span class="metric-label">Followers</span> </div> <div class="metric"> <span class="metric-count">803K</span> <span class="metric-label">Likes</span> </div> <div class="metric"> <span class="metric-count">1.4K</span> <span class="metric-label">Photos</span> </div> </div>
...with this CSS:
.metric { display: flex; flex-direction: column; align-items: center; }
So, the reason for replacing those elements with
<span>
tags is for accessibility. Themetric-count
andmetric-label
are not headings or paragraphs. They are just generic pieces of small text that are okay to be given a generic element like<span>
.I hope this is helpful. 😊
0
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