Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • Rafael• 460

    @rafaelvieiracosta

    Posted

    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-Ranaa

    Submitted

    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

    @rafaelvieiracosta

    Posted

    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

    @rafaelvieiracosta

    Posted

    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

    @catherineisonline

    Submitted

    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

    @rafaelvieiracosta

    Posted

    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

    @rafaelvieiracosta

    Posted

    Perfectly perfect!

    0
  • Rafael• 460

    @rafaelvieiracosta

    Posted

    This comment was deleted

    1
  • Rafael• 460

    @rafaelvieiracosta

    Posted

    This is perfectly perfect! Very good @AbdulrahmanFE

    1