Responsive Landing Page using CUBE CSS - Every Layout - Codyhouse

Community feedback

• 

  Ahmed Bayoumi•6,740

  @Bayoumi-devPosted over 2 years ago

  It looks good Mitchell,

  • I suggest you put the status of the preview card component in the list item to add more semantics to your project. like this:

  <ul class="stats-preview__stats">
     <li>
        <span class="stat-number">10K+</span>
        <span class="stat-name">Companies</span>
     </li>
     <li>
        <span class="stat-number">314</span>
        <span class="stat-name">Templates</span>
     </li>
     <li>
        <span class="stat-number">12M+</span>
        <span class="stat-name">Queries</span>
     </li>
  </ul>
  

  • Also I suggest you center the component on the page, by giving the parent element <main> the following properties:

  main {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
  

  Some Resources

  • How to Center Anything with CSS - Align a Div, Text, and More
  • 11 Ways to Center Div or Text in Div in CSS

  I hope this is useful to you... Keep coding👍

  0

  ---

  

  Mitchell Gould•250

  @helphopPosted over 2 years ago

  @Bayoumi-dev

  I added centring to the main as per your suggestion. But I used grid as follows:

    main {
      display: grid;
      place-contents: center;
  }
  

  Instead of min-height: 100vh I use min-height: 100% on the main. This is because on mobile phones there is space taken up at the top and bottom of the browser window on iOS and Android for other buttons. 100vh would cause some of the content to be hidden under these iOS elements. 100% does not have this issue.

  To set this up in my reset.scss I set:

  html,
  body {
    height: 100%;
  }
  

  Thanks for your suggestion for the data to be put into a list item. A bit of a head slap as I should know better. Div's don't do much for semantics but a list is much more meaningful. I will update my code to address this issue.

  0