All comments

• 

  Lucas Merino•150

  @lucas-merino-devSubmitted about 1 year ago

  I will improve this design and try to use CSS grid instead of floating boxes... Any advices?

  

  Responsive Social Proof Section

  1

  40
  

  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

  This comment has received 1 replyShow
• 

  Mirta•10

  @msmontenegro3Submitted about 1 year ago

  When placing the QR code in the center of the page I was wondering if there was a better way to do it, because I used margin-top, but I'm not sure if there's a better way.

  

  Responsive landing page using CSS

  1

  40
  

  Jergus Lysy•230

  @j3rgusPosted about 1 year ago

  Hello Mirta. To center the component you can use a wrapping container set up with flex:

  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    min-height: 100vh;
  }
  

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Elizabeth Bartholomew•150

  @pidgebeanSubmitted about 1 year ago

  It looks a touch off on the iPad view. I also had to adjust the padding-left manually for each screen size. If anyone has any suggestions on a better way to do this, please let me know.

  

  Testimonial Grid Using HTML and CSS

  1

  70
  

  Jergus Lysy•230

  @j3rgusPosted about 1 year ago

  Hello Elizabeth Bartholomew.

  Another way to do this is to use grid layout with column/row spanning. Deploying this will save you many lines in stylesheet and allow you for a simple way to deploy media queries for responsiveness.

  One way to deploy grid would be:

  1. Center the main component (typically with flex container centering on X and Y axis).
  2. Display component itself as a grid 2x4 (2 rows, 4 columns) with each person testimonial as an item of the grid.
  3. Select items inside the grid which you like to span (eg. Daniel horizontally, Kira vertically).
  4. Add media query with modified grid template (so that the grid displays in one column with all the items) and rearrange each spanned item.

  By utilizing the grid you can set a gap between each item which helps you to reduce many margins or padding from within the items itself.

  Hope this helps.

  0