Design comparison
Community feedback
- @correlucasPosted about 2 years ago
πΎHello Otto, congratulations for your new solution!
Your solution seems great and the html structure is really good too. Well done!
Something you can consider to improve is to make the component responsive deleting the property
width: 100%
in the container and lettingmax-width: 900px
to make it contract, you cannot use both and the CSS will consider the first.You should also use the media query a little later to have container horizontally and contracting with the screen if you activate it too earlier you creat a huge gap lateral and doesnt have a good look.
You can also consider using the
<picture>
to replace the div you use to swap imagens and wrap both desktop and mobile images together in the same tag, and render each image depending of the device (phone / computer) by the settings for the width you'll insert in the htmlIf you're not familiar with the
picture tag
here's a quick guide:https://www.w3schools.com/tags/tag_picture.asp
π I hope this helps you and happy coding!
1 - @ElektrokatPosted about 2 years ago
for the image on your mobile, you should use this code instead of making it a background image img { display: block; object-fit: cover; max-width: 100%; } I hope you find this helpful.
1
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