Design comparison
Solution retrospective
I'm proud of using max-width: 100%
appropriately for the .cardContainer
class.
I had issues vertically centering the text within the a
tags. In order to do this I had to ensure that the a
tags took up the full width of its parent container li
. I then applied display: flex
and align-items: center
to the li
tags and then applied line-height: 60px
to the a
tags to match the height
of the li
containers.
I would like some advice on how to make the .cardContainer
more dynamically responsive in both height and width. I feel this can be accomplished with media queries but I feel as if there is a simpler way as well.
Community feedback
- @LemnsaPosted 4 months ago
Congratulations @clarkjr2016 on completing this task!
Sure, there is way to easily center texts in a child element found in its parent's.
General case
Example:
Let's say you have a
<span>
tag inside a<div>
tag, and you want to center-align the text inside the<span>
tag.HTML
<div class="container"> <span class="centered-text">Centered Text</span> </div>
CSS
.container { text-align: center; /* Center-align text within the container, horizontally */ } .centered-text { display: inline-block; /* Ensures the span takes only as much width as necessary */ }
In short, applying
text-align: center;
to the parent, centers the child.So in our case,
text-align: center
is applied to the<li>
tag.Hope you grab the concept and it solves the problem, even if it doesn't stick, always refer back to your learning materials!
0@clarkjr2016Posted 4 months ago@Lemnsa Thank you for your reply! This does help with horizontal centering. Do you have any recommendations for vertical centering?
0@LemnsaPosted 4 months ago@clarkjr2016
Sure
By using flexbox (modern css)
In the parent, apply:
.container { display: flex; justify-content: center; /* Horizontally center the flex items */ align-items: center; /* Vertically center the flex items */ }
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