Hi,
using display flex on my cards
#prices {
display: flex;
align-items: center;
padding: 100px;
margin: 10px;
}
making them uneven and im not sure why, may anyone please help me with it?
What do you mean by “uneven”?
One thing that I do notice is that the second one is wrapped in a div that the others don’t have.
if I do flex-direction: column, they seem to be even as I change to row, the intermediate card separates from the rest and I don’t know why.
It was fine until I did flex-wrap: wrap; but can’t figure out why.
It is still not clear what it is doing that you do not want it to do or what it is not doing that you do want it to do. I don’t understand what you are trying to do.
I think maybe you want to get rid of align-items: center on the prices section?
got rid of it, did absolutely nothing.
Well, it did something for me, it aligned them all at the top, and I can see it is doing that for your project now.
I’m just trying to make cards below the video, if I don’t use flex they are just glued to the left side, so my solution was to make flex, in row direction, and to spread them around which worked before and now it doesn’t for some reason.
I am not sure what screwing the HTML here I really don’t.
where can you see that?
My problem is justify-content, doesn’t work for some reason, the first 2 cards seem to be glued together while the righter one is separated and I’m not sure what is causing that.
Do you not see that the Beginner, Casual, and Intermediate headings are all lined up vertically? When you had align-items: center set then they were not always lined up like that because the middle and right one were sometimes shorter than the left one and they were being centered vertically.
I think I am going to agree with @kevinSmith, I’m not sure what you are trying to do here either. Please be very specific about what the problem is you are trying to solve.
The gap between casual & intermediate is my problem, why did it start happening? am I the only one seeing it 
OK, now I think I understand what you are asking. I’ll ask @kevinSmith’s question again: Why do you have a div wrapped around the second list?
If i can be more precise there is a gap between the beginner & casual cards to intermediate I’m not sure what’s causing it.
Because previously it was fine I had no issues, but “casual” card had some issues, so I made a div around it to style it alone, that was my solution before.
Do you think there might be a reason that we keep asking why you have a div around the second list? We are trying to give you a very big hint as to what is causing your issue.
Yeah I just removed it, it seems to work, thanks:)
I now have another question if it’s okay…
If I want to make the “intermediate” and beginner cards, closer to the middle one which solution may I implement besides separating them with a div tag
It sounds like you want to center the cards and then put some sort of gap in between them?
Or maybe you want to limit the width on the parent section and then center the section itself?
space-evenly gave me the best result.
“Or maybe you want to limit the width on the parent section and then center the section itself?”
but if for example I wanted to implement this solution, how would have I done that?
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.