Responsive page using flex-box

Solution retrospective
I would like tips to improve my code, I'm thinking about changing areas, but I still don't feel safe to apply for a real position. Another point that I don't have a college degree in is chemical engineering, so I learned everything with the help of books and tutorials. I hope the community can help me improve my skills, thanks to everyone who took the time to comment on my solution.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @GitHub-dev12345
❤️👍 My small suggestion : 1.In Card design CSS Code Used this:
transform : scale(0.8); this property decrease the size of card. 😉
large size for increase the number of scale & small size for decrease the number of scale
I hope you find this helpful
Marked as helpful - @GitHub-dev12345
Congratulation 🚀😁 complete your challenge. Used this code want your card in center position :
in body tag Used this CSS Code: body{ display : flex; justify-content: center; align-item: center; }
in Card Design CSS Code used this property: align-self: center;
Marked as helpful - @denielden
Hi Gilcllys, I took some time to look at your solution and you did a great job!
Also I have some tips for improving your code:
- add
main
tag and wrap the card for Accessibility - add descriptive text in the
alt
attribute of the image - remove all
margin
frommain
id because with flex they are superfluous - add
justify-content: center;
flexbox property to the body for center the card vertically. Read here -> best flex guide - after, add
min-heigth: 100vh
to body because Flexbox aligns child items to the size of the parent container
Overall you did well :)
Hope this help and happy coding!
Marked as helpful - add
- @NaveenGumaste
Hello Gilcllys de Souza Costa ! Congo 👏 on completing this challenge
Let's look at some of your issues, shall we:
-
You have to use
<html lang="en">
-
To center the card vertically
max-height: 100vh; display: flex; justify-content: center align-item: center;
happy Coding😀
Marked as helpful -
- @shashreesamuel
Good job gilcllys with this challenge. Keep up the good work.
Your solution looks great however you can try scaling the card using the css transform property like this
transform: scale()
property.In terms of your accessibility issue simply wrap all your content between
<main>
tags.I hope this helps Cheers, Happy coding 👍
Marked as helpful
Join 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