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:
I managed to make it work using percents.
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? . …
I deleted that and put:
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.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.