Single price grid component // Mobile First, Grid

Community feedback

• 

  Roman Filenko•3,335

  @rfilenkoPosted about 4 years ago

  Hi Katrien, the simplest solution - put those 2 elements into one container, and make it flex {display: flex; align-items: center;}. Adjust other needed css properties (margin, padding) for child elements as well.

  Cheers, Roman

  2

  ---

  

  P

  Katrien Schuermans•1,210

  @katrien-sPosted about 4 years ago

  @rfilenko Yeah, that did the trick. Thank you.

  0
• 

  Sven•295

  @Sven72Posted about 4 years ago

  Hi Katrien, I solved the $29 with placing "$29 per month" into a div giving both "$29" and "per month" a p tag with a unique class. (Maybe an ID would be better?) `<div class="flex-container__row"> <p class="dollar">$29</p> <p class="month">per month</p>

  </div>`

  Than I applied in CSS display: flex to the div. So the pelements are aligned by default in a row.

  To center the month class vertically I need the align property from flex. So I have in my CSS:

  .month { align-self: center; color: var(--light-gray); padding-right: 90px; } Hope, this makes sense. Best, Sven

  1

  ---

  

  P

  Katrien Schuermans•1,210

  @katrien-sPosted about 4 years ago

  @Sven72 Great tip! Thanks.

  0
• 

  P

  Robert McGovern•1,095

  @tarasisPosted about 4 years ago

  👋 Katrien

  Congrats! Desktop is close 👍

  Don't forget the border-radius.

  Regarding the mobile version, it currently fills up the whole screen and doesn't look like a component (or the mobile design).

  I'd suggest in wrapper set width: 90%; and the margin: auto; and remove height: 100vh; from container and add the following to body

      height: 100vh;
      margin: auto;
      display: flex;
      flex-direction: column;
  

  Keep up the great work

  🖖

  0

  ---

  

  P

  Katrien Schuermans•1,210

  @katrien-sPosted about 4 years ago

  @tarasis Added the border-radius and made the mobile version a component with your input. Thank you :)

  0