How do you shrink using flexbox

I’m trying to be able to shrink (first, card) <div> when screen is resized.
When screen is smaller, it doesn’t shrink, neither it’s contents.

This was always mystery for me, even if using flexbox, and tailwind, I still can’t manage to make this.

It needs to be like https:// aaadfs.carrd. co/ (first card).

If you couldn’t see, here are pictures:

This is mine

Why does it do that ? Why doesn’t just shrink like it should ?

And my card is in fact smaller than one in that other website. Just doesn’t scale well.

Welcome to this forum.

It is due to the fixed width here:

.w-\[24\.35rem\] {
 width:24.35rem;
}
2 Likes

I managed to make it work using percents.
But weren’t rem and em used for responsiveness ?

It depends what you want to happen but use CSS max-width if you wish to limit how wide and element can become.

Have you tried deleting this? . …

.w-\[24\.35rem\] {
 width:24.35rem;
}

I deleted that and put:
width: 70%;

in .carddd class

That should work well.

@few3231

The reason the two different measurements work differently is because they are based on different baseline aspects.

  • % is based on the width of the container the element is in. If the element is a root element, i.e. just sitting in the body element, then it’s a percentage of the width of the browser window itself. If it’s a child element, then it’s a percentage of the width of the parent element.
  • rem is based on the size of the letter M in the baseline font size. If you use the browser default sizing (which you should), and the font size set by the user is 16px, and say a capital M takes 20px of space, then the container will be roughly then a 10rem size will be roughly 200px wide (20 x 10). But unless you’ve got your base font size growing an shrinking based on the browser window size - which works well on headings if done right, then 10rem size will ALWAYS be 200px wide

I made a quick & dirty example to show how they behave differently. Drag the frame back and forth to see how the widths change. Notice how the rem based window never changes.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.