Skip to content
Submitted over 3 years ago

My first Frontend challenge

Mohamed•325
@MohamedBehhar
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello guys, this is my first challenge on Frontend Mentor after learning HTML and CSS for few months, I would like to ask you about the usage of the HTML <picture> that I want to use to specify "img" for phone and desktop but I failed. Also, I'm confused about the usage of "px" or "vw & vh" to specify the height and the width of the card. My last question is about the "overflow: hidden" that I used to make the border of the picture round but on the other hand its affect the text that disappears once reaching the max-width of its parent. I'll be grateful for any advice or remark from you guys, I'm waiting for your feedback.

Community feedback

  • Mohamed•325
    @MohamedBehharPosted over 3 years ago

    Thanks a lot sir for your feedback, I really appreciate it, I'll try to remake it without specifying a height for the card and see how it will look. Have a nice day sir.

    0
  • Samuel Darkwah Manu•105
    @sammyhawkradPosted over 3 years ago

    Hi Mohamed, good work there. With the image you could use the HTML picture tag which let's you set a default 'img' and alternate images based on screen size.

    Personally I don't think you need to specify the height of the card. You only need to set the width then add a top-margin. "px" ,meaning pixels, gives a definite size. So if you set a size in px it means no matter the screen size it remains the same, it's not dynamic. "vw & vh" represent view width and view height respectively. They give the size of items based on the size of the viewer's viewport. You can also look into using percentages(%) for width and height. E.g width: 80% means the card will cover 80% of the screen the user is viewing your page on.

    The "overflow:hidden" clips the content inside the parent div so that no content of the child div goes beyond the bounds of the parent div. If you set the image in html you might not need to use that.

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord