Design comparison
SolutionDesign
Community feedback
- @correlucasPosted about 2 years ago
πΎHello Debadutta Panda, congratulations for your new solution!
Here's my tips for this challenge:
Make the image fully responsive add
display: block
andmax-width: 100%
andobject-fit: cover
to make the image auto-crop when resizing inside the column:img { display: block; object-fit: cover; max-width: 100%; }
The alignment here is the same thing of the other challenge, you can use flexbox and min-height to make the child element align to the parent height (body)
.bg-back { min-height: 100vh; --tw-bg-opacity: 1; background-color: rgb(249 245 235 / var(--tw-bg-opacity)); display: flex; flex-direction: column; align-items: center; justify-content: center; }
π I hope this helps you and happy coding!
0
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