Design comparison
Solution retrospective
Challenge #1: Getting the black background for the preview card:
- I initially was going to use two cards, one the preview card and the other a black-color background card. I had to learn a bit more on 'position', its types and got some understanding on how it works. I was already having trouble positioning/arranging the cards just right...figured developing the active state for it adds more complexity. So I looked into the solutions of others and saw one use 'box shadow' instead of how I did it. It was a lot more straightforward compared to my approach. So I used 'box-shadow'.
Challenge #2: Developing the active state.
- The logic goes as follows (for me at least)- Hover over the h1 (child) tag and affect the preview-card (parent) tag.
- But I hadn't come that right off the bat. At first I had developed the hover effect separately, the outcome was an odd one. Hover over the h1 tag, get it to turn yellow. Hover over the preview-card, get it to increase box-shadow.
- Realized 'Hang on! I should hover over the h1 tag and get it to turn yellow and the preview card to activate its hover effect simultaneously'. Didn't want to resort to ChatGPT...did a bit of searching around, found out about has(), not(), etc. Finally, found an article on stackoverflow mentioning 'pointer-event' and then problem solved!
I'd like help with figuring out how to make the preview card exactly centered. Its centered horizontally, but not vertically. Despite, justify-content and align-items...perhaps I put it in the wrong tag? should I put it in the body tag directly?
Community feedback
- @DarkstarXDDPosted 5 months ago
-
By default
<body>
, divs or sections won't take the full height of the screen. They will only take the height that is needed by the content inside them. You can give the.container
section amin-height: 100vh
which will force it to take the full height of the screen. Now your component will be centered vertically on the screen. -
The attribution should go inside a
<footer>
landmark element. Not a<div>
.
Marked as helpful0 -
- @danielmrz-devPosted 5 months ago
Hey there! šš½āāļø
Congrats on completing the challenge! ā
Your project looks fantastic!
Here's how you center an element vertically and horizontally:
š Apply this CSS to the body (skip position or margins to make it work correctly):
body { min-height: 100vh; display: flex; justify-content: center; align-items: center; }
Hope this helps!
Keep up the great work!
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