Design comparison
SolutionDesign
Community feedback
- @LshirocPosted over 2 years ago
Hi👋, I just took a quick look to your project. I suggest you:
- put
.img
to the right side - to erase the extra space under the image you should give
display: block;
to youimg
tag - for better alignment you should give:
.hero { min-height: 100vh; display: flex; justify-content: center; align-items: center; }
and erase the
min-height: 100vh;
frombody
tag. You can givemargin-top
andmargin-bottom
to your hero for mobile design (about 15px-30px). In addition, you should put your.attribution
div intomain
orfooter
tag.Keep coding 🙂☕!
Marked as helpful1@Sudarsh1010Posted over 2 years ago@Lshiroc Thank You bro. Will looking into those things
1 - put
- @tea-scriptsPosted over 2 years ago
Great Job completing the challenge. Some advice:
- You can try using grid lines or
grid-template-areas
to have the image in the desired location. - Taking a look at the "insights" you'd agree the color of the text and the
linear-gradient
for the image are pretty much the same so you can use the same color for both and just work on theopacity
. - Took a look at your mobile view and your image seemed to have some kind of
border-bottom
, you might want to look into that. - You should try to move this block
<div class="attribution">
into themain
also this would get rid of the landmark accessibility issues. - Good job having your global properties set up and reusing them when needed. Overall, you're doing a great job. Keep pushing mate!
Marked as helpful1 - You can try using grid lines or
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