@darryncodes
Posted
Hey Viktoria,
Welcome to FEM, good to have you here - it's the best place to learn (imo)!
To answer your question i'd add Flexbox to your <body> like this: display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh;.
If you've set a max-width on the card you could use margin: 0 auto; to centre horizontally but flex is best in this case!
Here are some really useful resources that might help:
- A Complete Guide to Flexbox - css tricks
- Learn Flexbox for free - Scrimba
- A Complete Guide to Grid - css tricks
- Responsive Web Design - freeCodeCamp
Keep coding!
Marked as helpful
@darryncodes
Posted
oh p.s @ViktoriaBors keep an eye on that accessibility/html report. It's a good habit to get into clearing it. Lots of helpful information in there - semantic is one of them for you - this all about using the most descriptive html you can like <main> and <footer>
Marked as helpful
@ViktoriaBors
Posted
Hi @darryncodes,
Thanks for your advice. I updated the solution according to the flexbox concept and the report :)
@darryncodes
Posted
Awesome @ViktoriaBors, you can refresh the report to get rid of the issues now!
Unfortunately the link to your Github repo isn't working to double check everything or help further, however:
- you card could do with
max-width: 400px;on.wrapperto dynamically control the width. MDN - max-width - border-radius is usually set as px/rem so the corners stay the same shape regardless of the viewport size. 10px looks great on your design
- this box-shadow generator might help create subtler effect
Any questions let me know!
