Challenge #1 Help! flex or Grid
I wanted to do it via flex, but how do I push the text without adding a margin and have it automatically push there? Do I have to modify the shape of the card?
Using grid list is easy but I need to do it using flex and flex shark
https://codepen.io/tazissam-the-looper/pen/abPGzOE
18 Replies
I need to shark text in full card
hey, would you mind correcting the "Hi Guys" part to use the correct spelling of Guys? This one is mildly inappropriate in this context
Oh, I apologize for my typo 😅
no worries, I figured it probably was 🙂 Thanks for editing your message
I personally think grid is the best option, myself. I personally used
grid-template-areas which makes responsiveness super easy
If you want to use flex, I suppose you could do something like make it width: calc(100% - avatarwidth) and set it to align-self to end. Not sure if that'd work without trying myself.For flex I believe you’d just set a flex wrap on the container and set flex basis 100% on the last item
Let's keep the discussion of the solutions out of this channel please
They’re asking for help though? Does that mean we don’t help them?
Yeah, I'm confused, is that not what this is for?
Sorry, I missed what channel I was in, my bad
No worries man, easy mistake
ah haha
as someone who mods a discord chat myself, I totally get it
I think that would still result in the last item being full width, yeah? The challenge needs there to be an empty block to the left of the text that's the width of the avatar
You can do a few things to fix that,
You just wrap the container in a wrapper and center it using margin inline, or you could set a max width on the container and give it a margin inline of the avatar width which you’d store in a local variable
@Woedenaz
yeah, the Margin is the easiest solution, I think. The OP specifically said they didn't want to use Margin, though
Personally I just did flex with 2 columns, 1 for the image, 1 for the text, aligned them to flex start and added a gap between the columns.
look at whitespace, why
align-items make this space ?