Design comparison
Solution retrospective
How to make image overlay accessible? Should I use paragraph or span HTML tags when using flexbox? Why does overlay expand outside of the image?
Community feedback
- @AdrianoEscarabotePosted almost 2 years ago
Hello Marek Brzezinski, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:
A good practice to center content is using
grid
orflex-box
, avoid using margin or padding to make placements, use only in the latter case! we can do it like this:Flex-box:
body { display: flex; align-items: center; justify-content: center; flex-direction: column; min height: 100vh; }
GRID
body { display: grid; min height: 100vh; place-content: center; }
The remainder is excellent.
I hope it's useful. ๐
Marked as helpful0 - @catherineisonlinePosted almost 2 years ago
Nice! ๐๐ป
I would also add some transitions for active states (when colors change on hover). It creates more interactivity and makes the project looks cooler. Active states can be done on buttons, links, titles which act like links or anything else, you choose.
You can read more about it here, in case you havenโt done much of it:โจhttps://www.w3schools.com/css/css3_transitions.asp
IF THIS WAS HELPFUL PLEASE MARK IT AS HELPFUL ๐คฉ
Marked as helpful0
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