Design comparison
Solution retrospective
El reto en este desafío de frontend mentor está en el posicionamiento del background con la "wave" u ola que debe agregarse con posiciones absolutas. Pruébalo y crea tu un componente pixel perfect.
Community feedback
- @de-furkanPosted almost 2 years ago
Great attempt at this project 🎉
I can see you have made effort to include CSS variables which is always nice to see :)
here are some improvements that can be made:
-
avoid setting height with vh on body to make the page full screen. This can be problematic on phones and smaller screens, especially when the project gets more complex.
- one way to get around this issue is:
html, body{ height: 100%; } main{ min-height: 100%; }
-
don't litter the HTML document with <div>, instead make use of HTML5 semantic markups e.g. <section> or <article> for the card component
-
supply a padding top on the body element so that it doesn't cause any alignment problems or clip out your card when the phone is in landscape mode.
- you could alternatively, supply a margin top to the card to achieve a similar effect
-
make use of rems for border-radius. On some screens the border-radius can cause un-intended side effects when you declare them with pixels
-
use some reset properties for CSS e.g. you could display <img> as:
img{ display: block; max-width: 100%;
I hope these help. Happy coding :)
Marked as helpful0@dudleydelgadoPosted almost 2 years ago@dev-furkan Gracias por tus comentarios los tendré en cuenta para aplicarlos.
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