Skip to content
OverviewSolutions
30
Comments
6

Rafael

@rafaelvieiracostaBrasil460 points

Entusiasta do desenvolvimento front-end

I’m currently learning...

CSS

Latest solutions

View more solutions

Latest comments

  • Rafael•460
    @rafaelvieiracostaPosted about 3 years ago

    Good work! 👍 It's really impressive to see that you didn't use any display flex or grid to solve the challenge, you have a lot of patience

    I have a tip for you to ensure the centering of your component independent of the screen, in case you want to test:

    • Remove the margin-top: 40px auto from your #container and add the following code to the body:
    body{
   margin: 0;
   display: grid;
   place-items: center;
   min-height: 100vh;
}
    0
  • Rafael•460
    @rafaelvieiracostaPosted about 3 years ago

    Hello @ Príncipe-Ranaa Good job! 👍The way you centered it is amazing

    But your site is generating a scrollbar because of the default body margin, to remove it just add margin: 0 to body

    I also suggest you do a little research on reset CSS and discover the advantages of using box-sizing: border-box

    Marked as helpful
    1
  • Rafael•460
    @rafaelvieiracostaPosted about 3 years ago

    Hi! @NitinSaini007 You did a great job ✨

    I have a tip for you to ensure the centering of your component regardless of the screen:

    • Remove the margin-top: 70px from your .container, then add the following code to the body:
    body{
   display: grid;
   place-items: center;
   min-height: 100vh;
}
    0
  • Rafael•460
    @rafaelvieiracostaPosted about 3 years ago

    Good job! ✨

    The way you centered it works for screens with 1440px but when you put it on a bigger screen it ends up breaking, and your article ends up expanding too much. If you want to test, one way to solve these problems would be the following:

    • To ensure perfect alignment on all screens, we can use the display flex, so just remove ALL the margin from your .article-container and add the following code to your main tag:
    main{
    display: flex;
    justify-items: center;
    align-items: center;
    min-height: 100vh;
}
    • And to prevent the .article-container from expanding, just put a max-width on it:
    .article-container{
    max-width:720px;
}

    If you only have a 1440px screen, you can test other sizes using your browser's DevTools

    0
  • Rafael•460
    @rafaelvieiracostaPosted about 3 years ago

    Perfectly perfect!

    0
  • Rafael•460
    @rafaelvieiracostaPosted about 3 years ago

    This is perfectly perfect! Very good @AbdulrahmanFE

    1