Responsive Social Proof Section

Community feedback

• 

  Jergus Lysy•230

  @j3rgusPosted about 1 year ago

  Hello @lucas-merino-dev.

  One way to do it using CSS grid is to split main layout into three parts where the top left one is title, top right one is rates and the bottom one is social:

  .main-layout {
    display: grid;
    grid-template:
      "title rates" 1fr "social social" 1fr / 1fr 1fr;
  }
  

  Individual parts then can be positioned by flex (or grid too) using align-items or justify-content, such as:

  #rates {
    grid-area: rates;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 85%;
  }
  

  and first and last children can be adapted to design by:

  #rates:first-child {
    align-self: start;
  }
  #rates:last-child {
    align-self: end;
  }
  

  Making it responsive you can then change the grid template to follow the column ordering:

  .main-layout {
    grid-template:
      "title" auto
      "rates" auto
      "social" auto
      "social" auto / minmax(300px, 1fr);
  }
  

  And then change the individual parts of grid (rates and social) to follow column ordering. You can also set width to 100% to fill up the whole horizontal space so that the aligning using first-child and last-child is cancelled.

  Marked as helpful

  0

  ---

  

  Lucas Merino•150

  @lucas-merino-devPosted about 1 year ago

  Omg u helped me so much! I never heard of that possibility, thank you for your time and feedback!

  0