responsive cards with flexbox

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 3 years ago

  Hey, really nice work on this one. The desktop layout looks really great, but I noticed when resizing the screen, the layout doesn't really respond at all and that's why, if you go to like 425px upwards, you will see that the screen hides the content and creates horizontal scrollbar. Mobile state looks great though.

  Here are some suggestions for the site:

  • It would be great to have a base styling of this:

  html {
    box-sizing: border-box;
    font-size: 100%;
  }
  
  body {
   margin: 0;
  }
  
  *,
  *::before,
  *::after {
    box-sizing: inherit
  }
  

  This way, handling an element specially its size will be easier because of the box-sizing

  • Avoid using height: 100vh on a large container like the body as this makes the element's height capped based on the viewport/screen's height. Instead use min-height: 100vh so that the element will expand if it needs to.
  • If you follow the min-height: 100vh on this , you will notice that the image on the right side disappears. I'm a bit confused on this one, I tinkered the element the .card to use something like min-height: ... but the image doesn't respond. I remove the align-items on the .card so that it will set to the default of stretch and remove the height: 100% on the img.
  • For those 3 information on the bottom part, as you may noticed, those are "list" of information about the company website. Therefore, you could use either ul or dl tag on that one. For this one, I think I would go dl tag since every text like the companies, templates... they could be the dt and the value above them are dd:

  <dl>
    <div>
      <dt></dt>
      <dd></dd>
    </div>
  </dl>
  

  Though I would need to set a:

  display: flex;
  flex-direction: column-reverse;
  

  On each of the div so that it will match the layout like on the design.

  • Also, those text like the 10k and others, the numbers, those aren't heading tags, because if you make it one, they don't provide any information on what a section would contain like a heading tag does. On a design, when a text is like bold text, it doesn't always mean that they are heading tags, you first need to ask yourself if the text is informative and give information on what a section would contain, if it does, then it is a heading tag.
  • Lastly, addressing the responsiveness issue:>>

  Aside from those, great job again on this one.

  0