Design comparison
Solution retrospective
any one who can help me to do responsive this page i struggled with is so help mentor me thanks...
Community feedback
- @MelvinAguilarPosted 12 months ago
Hello there ๐. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
- Consider adopting a Mobile First approach in your next project. This means designing for the smallest screens first and then scaling up as needed. This helps to create a more user-friendly and accessible experience for all users.
- Instead of using pixels in font-size, use relative units like
em
orrem
. The font-size in absolute units like pixels does not scale with the user's browser settings. Resource ๐.
-
You can use the
<picture>
tag when you have different versions of the same image ๐ผ. Using the<picture>
tag will help you to load the correct image for the user's device saving bandwidth and improving performance. You can read more about this here ๐.Example:
<picture> <source media="(max-width: 950px)" srcset="images/image-header-mobile.jpg"> <img src="images/image-header-desktop.jpg" alt="{your alt text goes here}"> </picture>
-
Responsive design involves using media queries, which allow you to apply different styles based on the device's characteristics. In your solution, within the media query, you should consider adjusting the direction and width of your component. Additionally, adding a small padding to the body can prevent your component from touching the edges.
body { padding: 40px; } @media only screen and (max-width: 950px) { main { flex-direction: column-reverse; } .left { width: auto; margin: 40px; } }
I hope you find it useful! ๐
Happy coding!
Marked as helpful1
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