Skip to content
Submitted over 2 years ago

I used simple html and css yeah that's it

Omer Muhammad•100
@MaskeyDude
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

  • What did you use to center your card/box?
  • Did you spend too much time on styling attributes too?
  • Was it hard or easy to use more than one image for different sizes?

Community feedback

  • Ibrahim San•230
    @ibra-sanPosted over 2 years ago

    Hi Omar, awesome work bud. Congrats on completing this challenge.

    1. I would definitely use flexbox to center the card. Think of flexbox as tool that will allow you to organize your box. So if you use display: "flex" on your body, and then justify-content: "center" align-items: "center". Everything inside the body tag will be vertically and horizontally centered in the body. Now if you stretch the width and height of the body to fit the entire page by using width: 100vw and height: 100vw then you will be making sure that the body tag will fit the full width and height of every view-port. Now your box will be vertically and horizontally centered on every viewport.

    2. haha quite a lot.

    3. Well initially I thought it was going to be tough, but I googled and found out about srcset attribute for img tags. That tell your html to swap images automatically given the different view ports.

    Thanks and good luck.

    P.S I am a newbie all the advice I give is based on my humble experience.

    Marked as helpful
    0
    Omer Muhammad•100
    @MaskeyDudePosted over 2 years ago

    @ibra-san Assalam U Alaikum, Ibrahim.

    1. I had been so frustrated centering the card and forgot I could use flexbox. About the 100vw/100vh I haven't tried it so this is some valuable advice. I'll use these methods in future projects as they seem much better than whatever I did.
    2. We're literally bros dude
    3. That was my exact thought as I haven't used 2 images for different sizes before

    On a side note I wouldn't think you're just starting out if you didn't say it yourself as your way of giving advice is professional. Thank you fella, I'm glad for these tips :]

    1
    Ibrahim San•230
    @ibra-sanPosted over 2 years ago

    @MaskeyDude walaikum al salam wa rahmatullahi wa barakatuh

    Thanks bro, appreciate the nice words.

    0
    Omer Muhammad•100
    @MaskeyDudePosted over 2 years ago

    @ibra-san You're welcome.

    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