@MelvinAguilar
Posted
Hello 👋. Congratulation on successfully completing your first challenge 🎉 ! !
I have some recommendations regarding your code that I believe will be of great interest to you.
-
You can use the CSS background properties on the body element to set the background of this challenge
body { background-color: hsl(225deg, 100%, 94%); background-image: url(./images/pattern-background-desktop.svg); background-repeat: no-repeat; background-size: contain; background-position: left top; }background-colorSet the background color.background-imageSet a background image.background-repeatSets if a background image will be repeated along the horizontal and vertical axes, or not repeated at all.background-positionSets the starting position of a background image.
The background property is shorthand for all the properties mentioned above:
background: hsl(225deg, 100%, 94%) url(./images/pattern-background-desktop.svg) no-repeat left top/contain;
-
To vertically center your element, you'll need to specify a height for it. Without a defined height, your element won't center vertically. In addition, you can remove the "margin-top" property since it's unnecessary when centering the element both horizontally and vertically using "align-items" and "justify-content" properties. So, try these changes:
- Add a "min-height: 100vh" property to your "<body>" tag to set its height.
- Remove the "margin-top" property from the "container" as it's no longer needed.
I hope you find it useful! 😄 Above all, the solution you submitted is great!
Happy coding!
Marked as helpful
@nyllegriffiths1
Posted
@MelvinAguilar Thank you so much Melvin, really appreciate the feedback it was really helpful!
