Design comparison
Solution retrospective
Hello everyone ,
I'm a little bit disappointed of my desktop result for this challenge, I don't know what happened to my brain to stop thinking for the solution. I did the mobile version first and it went perfectly fine for me but once i started the desktop version, I didn't get the result as the provided preview.
That's why I need both your feedback and advice to enhance the disaster i have made. CANT WAIT TO READ UR COMMENTS thank you !!!! UPDATE EVERYTHING IS FIXED THANK U ALL
Community feedback
- @HassiaiPosted almost 2 years ago
Replace<section class="card">with the main tag and <div class="attribution"> with the footer tag to fix the accessibility issues. click here for more on web-accessibility and semantic html
To center .card on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.
To center .card on the page using flexbox: body{ min-height: 100vh; display: flex; align-items: center; justify-content: center; }
To center .card on the page using grid: body{ min-height: 100vh; display: grid; place-items: center; }
in the mobile design give .card a max-width value for a responsive content instead of width: auto. e,g:
max-width: 400
.In the media query, increase the max-width value of .card
max-width: 600px
. Give .card-image--desktop display: block and a width of 50% and give card-article a width of 50% and increase the padding value for all the sidespadding: 2em
. there is no need for margin-bottom value and justify-content in .card_article.Hope am helpful.
Well done for completing this challenge. HAPPY CODING
1@rymxoxoPosted almost 2 years ago@Hassiai Thank you so much for your time and advice .
I have uploaded the new version of my code , now i'm facing the hover problem and the image does not want to fit
0 - @ninjabroPosted almost 2 years ago
i might want you to work on the layout first
size for desktop is too big, reduce the size and you should be good to go!
i used grid for layout and flex for inside div containers
you could improve these below listed
center the card container in body , paddings around the perfume card, button font size, height of button.
hope this might help you
0@rymxoxoPosted almost 2 years ago@ninjabro Thank you so much for your time and advice .
I have uploaded the new version of my code , now i'm facing the hover problem and the image does not want to fit
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