Frontend Mentor | Clipboard landing page | CSS HTML coding challenge solution

Solution retrospective

really fun layout to code, the original desing got the computer image overflowing a little to the left, could came out with a proper way of doing it, my first though was to set his container with the max-width and the move it with position or transform, but didnt quite worked, if someone got a better way of doin it im all eyes, happy coding

Community feedback

tediko• 6,580

@tediko

Posted almost 3 years ago

Hello, Luis! 👋 Congrats on finishing another challenge! 🎉 Good effort. Your solution looks very good and also responds well. Here's my few tips:

You should wrap your logos (google etc.) images into some anchor <a> element. Additionally since this images are not decorative you should add alternative text to it.
Add aria-labels for .social-media-icons anchors.
Because you use width: 60% on .grid1 .card img your images are huge on mobile screen size.

Good luck with that, have fun coding! 💪

Luis Colina• 1,043

@Comet466

Posted almost 3 years ago

thanks @tediko you're becoming my mentor lately, i notice the problem with the images on mobile screen size i used width: 60% to fixed it but it barely improved it a bit, what can i do?

Luis Colina• 1,043

@Comet466

Posted almost 3 years ago

hello again @tediko, already fix the problem, i just set the max-width to the max allow for the parent container it looks fine now, i also fix the accesibility issues thanks again

tediko• 6,580

@tediko

Posted almost 3 years ago

@Comet466 You can even hard code width on your icon images like width: 50px since they don't need to stretch like this mockups/ilustration images.

Clipboard landing page | CSS HTML

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community