How do I make responsive cards?

[troyb16]

I am working on the Personal Portfolio Webpage and in the example here…

FCC: Personal Portfolio

The images will grow in size from 320px all the way up to 730px.

My images do not… https://codepen.io/troy_b16/pen/gOXRxRO

If someone could help explain to me why that would be greatly appreciated!

[LucLH]

Hi @troyb16,

I am not a huge expert of the unit rem, because I don’t like it and don’t use it (personal point of view). It is a unit for the font size. I talk about it cause I saw it in your CSS:

.card {
  background-color: #483C32;
  font-size: 1.3rem;
  width: 22rem;
  height: 20rem;
  margin-bottom: 2.2rem;
  color: #D4BC8C;
  text-decoration: none;
  text-align: center;
  border-radius: 5px;
  box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.41);
}

If you use the % unit, it is sure you will have something responsive and answering your expectations. Just the unit you use is not the more appropriate here, even it is a relative unit. You can check also the units vh (viewport height) and vw (viewport width).

[troyb16]

Thanks @LucLH! That worked! I’m still trying to figure out when is the best time to use rem, em, %, vh, vw, px …it’s still a bit confusing to me.

[LucLH]

You’re welcome @troyb16! There are many units and according to the case you are facing, some are better to use. After, you don’t need to use them all, it is good to know them in case you work on projects where some units are used already, but you can have your selected ones. You can search online the type of units for CSS, I give you a link: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units. They have short explanation for each unit, but you maybe already saw that page

[bbsmooth]

If you set the width on an element to a specific size then it won’t be responsive to changes in its parent’s width because you have told it to always stay at a specific width.

width: 22rem;

This means the element will always be 22rem wide. Granted, the physical width on the page will change as the font size changes, but it will always be 22rem which means its width won’t change if its parent’s width changes. To get a true responsive width you generally want to set the width to 100% and then you can put a max-width on it if you need to prevent it from getting too big.

[troyb16]

Hey thank you for that explanation @bbsmooth, that was easy to understand! I’ll keep this in mind when I’m doing my next project!

[bbsmooth]

Also, I highly recommend you use rem units for all width-related properties you can, including for media queries. As I alluded to above, using rem allows your page to be responsive to changes in font size as well as changes in view port width. This is a nice accessibility enhancement for people who have poor eyesight and need to increase the font size in order to read the page.

I personally use rem for almost everything except perhaps little things like borders.