Skip to content
Submitted almost 3 years ago

Responsive Card using Flexbox

Lisa T•40
@lisacodesnow
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I found getting the height of the image in desktop view the most challenging.

I tried using '100vh', something I had never used before and couldn't figure out how other solutions used it correctly.

Everytime I set the height to the parent element instead of to the actual background element, it would enlongate the entire container and I would have a really long image and short text.

And when I tried to set min-height: 100vh I couldn't see the image at all.

So I just used image tags, gave each image its own seperate class, and set one to display: none and another to display: inline.

Even though it worked I still had to finesse the height and set it to 40% instead of 100% so the container wouldn't be too long.

The question is why can't the image be the same height as the text beside it, without adding a fixed height or guessing a percentage?

I used flex to center the container on the main and cross axis, but in desktop and other mobile screen sizes I have all of this extra space at the bottom.

Is there a way to get the card in the middle of the screen or will there always be extra space at the bottom?

Overall, this was a fun project and a great intro into coding. Can't wait to do more.

Code

Please log in to post a comment

Log in

Community feedback

  • Plinsinga•310
    @codedforfree

    Hey Lisa,

    Good try. Indeed you could set Html, body {height:100%} or body {height: 100vh:}. Furthermore, I would read a bit about the picture element. Here.

    Another thing I would do is make the 'perfume' text uppercase and add some letter spacing to it. Next to that, I would check my overall widths a bit better.

    But this is a good start to learning and working on your front-end skills, so keep it up.

    Marked as helpful
  • Nirajan Prasad•190
    @behubj

    Hey Lisa, Well try you tried your best to complete your project, i appericiate that.

    If you want to center your "container_wrapper" you have to fix your code{ Do (html,body: height-100%;)} it will fix your code and your <div> comes in center horizontally and verically.

    Hope it will help you and if you want you can check my solution. Happy coding...

    Marked as helpful
  • Phúc (Scott) Nguyễn•430
    @NationsAnarchy

    Hey Lisa! As I always tell myself, no matter what we code - we can always improve on it by learning and doing.

    Since there are two great comments above already, I can also suggest you to check the HTML Report option, as there are a couple of things you can do to make your HTML file more structruely correct and usable.

    Keep it going! I believe that you're in the right track, and I hope you have fun doing this as much as I do.

    Phúc (Scott).

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