Design comparison
Solution retrospective
Hello,
Can you explain to me how to make it mobile friendly. I do know about the @media screen but I can't figure it out to get it as a colum even tho I played around with flex-direction: colum;
Also, I tried to make it responsive using rem instead of px, please feedback how to make it better.
Community feedback
- @VCaramesPosted almost 2 years ago
Hey there! 👋 Here are some suggestions to help improve your code:
- Do not forget ⚠️ to check your FEM report (It provides value information), to see what is incorrect and update your code with it. This should be done immediately after submitting your challenge.
- 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
- Your
CSS Reset
is being underutilized. 😢 To fully maximize 💯 it, you will want to add more to it. Here are some examples that you can freely use 😁: Josh Comeau Reset Eric Meyer Reset
- Your content is not fully responsive. 😢 Here is a link to Google Developer’s site that will teach you how make it 100% responsive:
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding! 🎆🎊🪅
Marked as helpful0 - @HassiaiPosted almost 2 years ago
Replace <div class="main"> with the main tag to fix the accessibility issues.
For the color of the image, add a background-color of soft violet , background-blend-mode: multiply and opacity of 0.8 to .picture.
.picture{ background-image: url(); background-size: cover; background-color: hsl() background-blend-mode: multiply; opacity: 0.8; }
In the media query for the mobile design, give .container a flex-direction column and reduce a width value, for a responsive content replace the width of .container.
max-width: 22rem;
. Give . description and .picture a width of 100%. sample@media (max-width: 600px){ .container{ max-width:25rem; flex-direction: column; } .description{ width: 100%; } .picture{ width: 100%; } }
For more on media queries click here.
Hope am helpful.
Well done for completing this challenge. HAPPY CODING
Marked as helpful0@DannyHTMLPosted almost 2 years ago@Hassiai Thank you! I will try this when I have time and will upload the results
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