@Leo-yagami
Posted
Im not sure if you know the flexbox technique. You basically set the main-card component to display flex and use align-items and justify content to center the component vertically and horizontally. Something like this:
.social_card{
display: flex;
align-items: center;
justify-content: center;
}
Marked as helpful
@MichaHuhn
Posted
@Leo-yagami I tried that at first, but flex causes the card to shrink. However, the card should be wider as shown in the mockup. That's why I chose a different approach.
Edit: I just tried your code on the parent element and applied flex: 1; to the card. That causes the card to take up the entire width again. Then I can just apply a max-width: 24rem; as given in the mockup. Now the card is clamped to this max-width and it is responsive on smaller screen sizes. However, in this case we need to add a padding to the parent, so the card doesn't touch the viewport.
That could be an approach too.
I guess, I still stick to the max-width-wrapper technique I described earlier, because it fits the use case and works well.
