stats-preview-card-component-main

Solution retrospective
I can't change the color of the image. I had a lot of trouble using 2 images of different sizes
Please log in to post a comment
Log in with GitHubCommunity feedback
- @finkenmann
you should check your breakpoints. A lot of mobile devices going down to 320px. At this point your layout is broken. Also the value for the desktop version. Make it bigger or use flexible values for your container and the child elements to be more flexible.
Marked as helpful - Account deleted
Hey there! 👋 Here are some suggestions to help improve your code:
- The
header
element is not needed for this challenge.
- The images serve no other purpose than to be decorative; It adds no value. The
alt tag
should left blank and have anaria-hidden=“true”
to hides it from assistive technology.
More Info:📚
https://www.w3.org/WAI/tutorials/images/
- The images serve no other purpose than to be decorative; It adds no value. The
alt tag
should left blank and have anaria-hidden=“true”
to hides it from assistive technology.
More Info:📚
https://www.w3.org/WAI/tutorials/images/
- The statistics at the bottom are a list, so it should be built using an
unordered List
element.
More Info:📚
MDN <ul>: The Unordered List element
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding!🎄🎁
Marked as helpful - The
- @Hassiai
Give the header a background-color of soft violet. Give the img a max-width of 100% , mix-blend-mode of multiply and an opacity of 0.7.
To center .container on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.
Use rem or em as unit for the padding, margin and width values. for more on this watch this https://youtu.be/N5wpD9Ov_To
Hope am helpful HAPPY CODING
Marked as helpful
Join 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