Skip to content
OverviewSolutions
12
Comments
12

Dilhan Boca

@dboca93Melbourne220 points

I'm an aspiring Web Developer located in Melbourne, Australia

Latest solutions

View more solutions

Latest 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
View more comments