Help with text in design

[colby1]

Was wondering if anyone could give me last little bit of help with my design project from front end mentor. I just need help with the text. Everything I tried moved more of the spacing of the letter than actually moving the text itself. Here is my pen

Car flex

And this is what I am trying to match .https://www.frontendmentor.io/challenges/3column-preview-card-component-pH92eAR2-

[bbsmooth]

Two things:

• Notice how each card has uniform padding on all four sides. It seems like it would make more sense to put the padding on the card div instead of on the individual elements (such as the image, heading).
• I would consider using flexbox for the elements in the card.

[royalwhale]

Hi,
Adding this piece to your css, does what you are asking

h1+p{
  margin:20px;
}

Even though this challenge comes from non-FCC website

[colby1]

adding the padding to the individual cards is just expanding that card padding. The text is not affected.

[colby1]

Sorry, did not work for me

[bbsmooth]

I guess I don’t understand what you are trying to do with the text. From the FEMasters example it looks like the text should not be touching the sides of the card but rather should have side padding just like the image, heading and button. So if you put side padding on the card itself then all of these elements, including the text, would be constricted to the card’s side padding.

[royalwhale]

I put that code on your codepen and tested, it worked. Seems you inserted it in a wrong place

[colby1]

I agree there needs to be some padding. So in the front end mentor example it looks like they have less text per line. Even when I add the padding I still have the same amount of text.

[bbsmooth]

The way the text lays out has a lot of factors involved, such as font family, font size, line height, letter spacing. So you would need to match what they are using as close as possible to get it to look exactly the same.

Also, I’m guessing box-sizing: border-box; will help with the padding issue.