display: flex, flex-direction: row

Community feedback

• 

  Rémi Martineau•355

  @MartineauRemiPosted over 3 years ago

  Hey ! This is a great start :)

  If you want to center components in your layout, you could use Flexbox for example:

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

  The width and height properties is for your site to match the viewport size. In case you need it, here is a great guide to learn more about flexbox : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

  You can also do it with CSS Grid:

  body{
      display: grid;
  }
  .container{
      place-self: center;
  }
  

  Here is a guide to CSS Grid aswell: https://css-tricks.com/snippets/css/complete-guide-grid/

  Flexbox and Grid are powerful tools to build any layout, I recommand you check it and to try them a bit ;)

  For the image, it seems that your path in your html file is wrong. In your Github repository, the desktop image is in the 'stats-preview-card-component-main/images' folder. Try to change the src accordingly.

  Hope that helps you ! Happy coding :)

  Marked as helpful

  2

  ---

  

  Dan•30

  @DFO89Posted over 3 years ago

  @MartineauRemi Thank you!

  0
• 

  Raymond•105

  @raybags-web-devPosted over 3 years ago

  Hi there you did well. I think you did not provide the correct path to the cover image. Its not showing. I just did the same challenege. Allow me to share some feedback.

  1 Your main container is not absolutely positioned. If you open the dev tools and reduce the screensize, the whole project slides left. In your container, place this code: .container{ position: absolute ; width: 80% ; // *you could go with your preference* height: 70% ; top: 50% ; left: 50% ; transform: translate(-50%, -50%); }

  2 You need a bit more understanding about [responsive designs] and positioning. Please use this resource and learn abit more about it.

  • [responsive-designs-with-w3schools.com] (https://www.w3schools.com/html/html_responsive.asp)
  • [responsive-designs-with-MDN] (https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design)

  Goodluck.

  Marked as helpful

  1

  ---

  

  Dan•30

  @DFO89Posted over 3 years ago

  @raybags-web-dev Thanks so much!

  0