Skip to content
OverviewSolutions
12
Comments
12
Dilhan Boca
@dboca93

All comments

  • Dilhan Boca•220
    @dboca93

    Great job !

    Keep in mind it's a good idea to throw a min-width: 320px (or the equivalent rem) onto the body element, to prevent it from collapsing at extremely small screen sizes.

    Perhaps you could use the article element instead a plain div for the cards, this would incorporate more semantic html. Also, try if possible to include an explicit width and height for the img elements, this will help the page load faster.

    Enjoy your coding journey !!!

  • Satyam-Pandey677•220
    @Satyam-Pandey677
    What are you most proud of, and what would you do differently next time?

    Now understand the all css properties and now confident and make new things and now now I'm no think to start any project

    What challenges did you encounter, and how did you overcome them?

    none

    What specific areas of your project would you like help with?

    none

    Four card feature section

    1
    Dilhan Boca•220
    @dboca93

    Hello,

    Well done on submitting the task. I hope you are enjoying your coding experience on FM. I would note that generally developers create websites down to 320px width; and your website doesn't scale down responsively after 540px in size.

    I noticed you have perhaps one too many div containers in your html code. If you have time, please look at my solution, particularly the code I applied to ".grid__layout" which will provide the core structure to the card container:

    https://fm-four-card-feature-eta.vercel.app/

    Please mark this comment as helpful if you find it such, All the best :)

    Marked as helpful
  • Dilhan Boca•220
    @dboca93

    Hi Erfan,

    Good work on submitting tasks on FM. I hope you're enjoying your coding experience.

    In order to get your card in the middle of the page properly, try putting the card container in a <main> element, than apply the following CSS code to that <main> element:

    main {
    display: flex;
    width: 100%;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
}

    That should bring the card into the middle of the page. I hope you found this information helpful, please mark it as helpful if you have time.

    Regards Dilan Boca

  • Dilhan Boca•220
    @dboca93

    Hello Ahmed,

    I hope your enjoying your coding experience. There is a particular issue with your code that if you correct, your code will look much closer to the design file. Your code on the body element is currently like below:

     body {
    background-color: hsl(217, 54%, 11%);
    display: flex;
    justify-content: center;
    align-items: center;
}

    But if you change it to this:

     body {
    background-color: hsl(217, 54%, 11%);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

    You should see an immediate difference. I didn't have time to review the rest of the code. However, I also noticed that you need to put a min-width (maybe around 320px) on the parent container. You can adjust the height/width of the image as needed. Also, if you have time learn about semantic html, as this is important in the future. Please if you find my comment helpful, mark it as helpful.

    Feel free to add me on twitter: @dboca93 Thanks !

  • Dilhan Boca•220
    @dboca93

    Hello @ElsonMartins,

    Congratulations on submitting this task. I sincerely hope you're enjoying your coding experience. Looking at the design file, the central container needs to be centered both horizontally and vertically in the middle of the page. I found some code you wrote which is preventing this from happening, which is:

    @media (min-width: 22rem)
body {
    min-height: 0; 
    padding-top: 5rem; 
}

    If you remove this code, the other code you placed on the body, which is much better, will be able to shine through:

    body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--light-gray);
    min-height: 100vh;
    display: grid;
    place-content: center;
}

    I wish you all the best for the future. Please mark this comment as helpful if you can ! Please feel free to add me on Twitter if you like : @dboca93

    Marked as helpful
  • Dilhan Boca•220
    @dboca93

    Hey Ryan,

    Hope you're enjoying your experience on Frontend Mentor. Your site is pretty good. However, when the screen size is between 770px and 900px wide (roughly) the creative wide-scrollbar you've created laps over one of the cards. Also, you could maybe use a bit more semantic html in your code.

    If you have time, maybe you could look at my page: https://fm-four-card-feature-eta.vercel.app/

    I believe that CSS Grid works a bit better on this design than flexbox.

    All the best, Please mark this comment as helpful! Feel free to add me on twitter: @dboca93

    Marked as helpful
  • Dilhan Boca•220
    @dboca93

    Hey,

    Great work on this challenge. One recommendation might be to use some more semantic html. You could use the <picture> element for the image, the <article> element for the text and instead the "stats-text" div you could use a <ul> with -- <li> replacing the <p> element.

    I hope you're enjoying your coding journey. All the best. Please feel free to add me on Twitter: @dboca93

  • Dilhan Boca•220
    @dboca93

    Hello @Zayacode96, well done on completing this task, I hope you're enjoying your coding journey. This is a good attempt, the main issue is that the "Results Summary" area is a little small. Also you could wrap the content using the main element, and give that the styles you applied to "card-container." Try wrapping the content in a main element with the following code:

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

    Then, it would be good to incorporate some core semantic HTML on the content like section or article. Also try and get some more size on the core area, as it's a little small when compared to the design file. I hope you appreciated my help. Feel free to add me on social media for future correspondence.

    Twitter: @dboca93 Linked-In: Dilhan Boca

  • Dilhan Boca•220
    @dboca93

    Hello @Abdokhattab11, well done on completing this task, I hope you're enjoying your coding journey. This is a good attempt, the main issue is that the "Results Summary" area is not located in the middle. Try wrapping the content in a main element with the following code:

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

    Also, it would be good to try including some semantic html elements (like main, section or article etc.) I hope you appreaciated my help. Feel free to add me on social media for future correspondence.

    Twitter: @dboca93 Linked-In: Dilhan Boca

  • Dilhan Boca•220
    @dboca93

    Hey @lisagriggs, well done on submitting this task. I hope you're enjoying your coding experience. This is a decent first attempt. One thing to focus on might be learning about semantic html elements like main, section and article. For example, instead of:

    .container {
    height: 95vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    This could be:

     main {
    max-width: 100vw;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    This small adjustment would be great. Hope you appreciated my input, all the best !

    Marked as helpful
  • Dilhan Boca•220
    @dboca93

    Hey Alex,

    Well done on attempting the task, I hope you are enjoying coding challenges. The biggest issue I noticed with your code is that on line 35 you put:

    align-content: center;

    When it should be :

    align-items: center;

    This would immediatly improve how your website looks, and make it closer to the design. All the best with your coding journey !

  • Dilhan Boca•220
    @dboca93

    Hello @dweemon,

    Congratulations on submitting this task. Instead of playing around with position and then amending the margin, it would be easier to use a main inside the body element (that has the rest of the code in it) with the following code:

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

    This might be easier, especially going into the future, I remember not finding out about viewport units quiet late, this will hopefully make it much easier for you !