Skip to content
OverviewSolutions
30
Comments
7
Rafael
@rafaelvieiracosta

All comments

  • Rafael•460
    @rafaelvieiracostaPosted over 2 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
  • prince rana•210
    @Prince-RanaaSubmitted over 2 years ago

    This is the best that I could do. All the feedback are welcome, any thing that I might have missed than let me know. Thank you

    html and css

    1
    Rafael•460
    @rafaelvieiracostaPosted over 2 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 over 2 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
  • 👾 Ekaterine Mitagvaria 👾•7,600
    @catherineisonlineSubmitted over 2 years ago

    Hello, Frontend Mentor community! This is my solution to the Article preview component.

    I have read all the feedback on this project and improved my code. Due to the fact that I published this project very long ago, I am no longer updating it and changing its status to Public Archive on my Github.

    You are free to download or use the code for reference in your projects, but I no longer update it or accept any feedback.

    Thank you

    Article preview component

    11
    Rafael•460
    @rafaelvieiracostaPosted over 2 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 over 2 years ago

    Perfectly perfect!

    0
  • Rafael•460
    @rafaelvieiracostaPosted over 2 years ago
    This comment was deleted over 1 year ago
    1
  • Rafael•460
    @rafaelvieiracostaPosted over 2 years ago

    This is perfectly perfect! Very good @AbdulrahmanFE

    1