Desktop solution using vanilla html and css

Community feedback

• 

  Abdelrahman Khaled•280

  @Abdelrahman0KhaledPosted over 1 year ago

  Congratulations on completing this challenge👌❤️, here are some tips to make it look better. to center with out flexbox you can use

  .contaner {
  position: relative;
  transform: translate(- 50%,  - 50%);
  }
  

  and you need to use fonts in style-guide file, and you need to make border-radius like

  card{
  border-radius: 15px;
  }
  

  and you don't need to border color and Congratulations again ,keep coding bro❤️😊 EDITED bro❤️

  Marked as helpful

  1

  ---

  

  Askell•60

  @AliAbuSalamPosted over 1 year ago

  @Abdelrahman0Khaled Thank you! I somehow forgot to change the font. It's fixed now. Regarding your suggestion, can you explain this part:

  transform: translate(calc(50% - 50%), calc(50% - 50%));

  why is it calc(50% - 50%)? wouldn't it just equal to zero? which in turn changes nothing.

  0

  

  Abdelrahman Khaled•280

  @Abdelrahman0KhaledPosted over 1 year ago

  @AliAbuSalam it's my pad bro, its edited to

  .contaner {
  position: relative;
  transform: translate(- 50%,  - 50%);
  }
  

  0
• 

  Brayan Miza•560

  @bramizdevPosted over 1 year ago

  I'm not sure if this is the best way for center your content for these challenges but while solving one of these challenges, Kevin Powell (a great Youtuber who teaches CSS and web development in general), used display: grid in the body selector. Since then I usually use that to center my Frontendmentor challenges. This works if your body is covers 100% of the height.

  body{
  min-height: 100vh;
  display: grid;
  place-content: center;
  } 
  

  source: https://youtu.be/B2WL6KkqhLQ?t=1652

  Marked as helpful

  1

  ---

  

  Askell•60

  @AliAbuSalamPosted over 1 year ago

  @bramizdev Thank you for the suggestion. I also know this website from Kevin Powell, haha.

  1