Kevin Powell - Community•16mo ago

Trying to bring two items closer together inside a grid on different rows

https://codepen.io/bsups/pen/yLGOZBL At the bottom trying to bring the name Michelle Appleton and the date closer together. Im pretty sure I had it working last night, but decided to redo it because I wanted the button to be more dynamic rather than replace by new html. (I despise this Frontend Mentor layout) I have tried all the justifies and align options, the elements height, and messing with margin.

6 Replies

Choo♚𝕂𝕚𝕟𝕘•16mo ago

You could set a line-height on the paragraph tags.

snxxwyy•16mo ago

@bsups it's because your body tag has line-height: 2em; on it, you would decrease the line height on the paragraph tags as choo said, i'd recommend doing so with a utility class since i gather you wouldn't want to target every paragraph on the website and it isn't recommended to target the tags specfically e.g. <p></p> since they aren't meant to be used for styles. for example you could do this:

<div class="user--wrapper">
  <img src="images/avatar-michelle.jpg" alt="" class="user__img" />
  <p class="user__name small-lh">Michelle Appleton</p>
  <p class="user__date small-lh">28 June 2020</p>
</div>

<div class="user--wrapper">
  <img src="images/avatar-michelle.jpg" alt="" class="user__img" />
  <p class="user__name small-lh">Michelle Appleton</p>
  <p class="user__date small-lh">28 June 2020</p>
</div>

.small-lh {
  line-height: 1.5;
}

.small-lh {
  line-height: 1.5;
}

Choo♚𝕂𝕚𝕟𝕘•16mo ago

.user--wrapper p{
  line-height: 1.5;
}

.user--wrapper p{
  line-height: 1.5;
}

Would also work.

snxxwyy•16mo ago

ErrtuOP•16mo ago

Thank you all. Sorry my brain was fried and forgot to look outside the box… or well div.

snxxwyy•16mo ago

no worries!

Gaming

Programming

Trying to bring two items closer together inside a grid on different rows