Skip to content
Submitted almost 3 years ago

Preview card using CSS flexbox

Gracie•50
@graciedevine
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I have a few questions about this project and would appreciate any feedback or resources.

  1. The text description of the vehicles is spaced similarly to the model, however I could not get the columns to be even (the yellow is more narrow than the other two). I was wondering how other people approached this problem. I adjusted the margins and padding, but was wondering if putting the paragraph text in nested divs would be better.

  2. I couldn't get the buttons to center, even when adjusting margins and padding. I tried to treat them as flex items as well, but couldn't properly center them.

  3. The text on the buttons should be the same color as the background- but I'm unsure how to approach this. Can you change the opacity of text? Did you just make the text the same color as the background to match?

Community feedback

  • darryncodes•6,370
    @darryncodesPosted almost 3 years ago

    Hi Gracie,

    Really great effort, well done!

    • I would avoid using padding and margin to position content. FlexBox will do all that for you. I quickly removed the padding from yellow-column blue-column and green-column and it has help dramatically. I'd encourage you to really familiarise yourself with the box model
    • You could also make those columns a flex container and have control over positioning the flex items (the button) easily. This is an invaluable comprehensive flexbox guide
    • Your design is not mobile responsive. You should take some time to understand how media queries work. You could then change the flex direction of .wrapper to flex-direction: column at a mobile breakpoint to make it responsive. You'd need to change the location of the border-radius on the corners when the design becomes a column.
    • This is a handy guide to styling buttons that I think will really help you

    I think you did really well, and creating projects is the best way to learn. So keep it up!

    Any questions let me know.

    Marked as helpful
    1
    Gracie•50
    @graciedevinePosted almost 3 years ago

    @darryncodes Thank you so much! I'll look at these resources in more depth and let you know if I have any more questions!

    0
    Gracie•50
    @graciedevinePosted almost 3 years ago

    @darryncodes Hi there, I removed the column padding and turned the buttons into flex items! I was wondering though, could you help me with making my footer mobile responsive? I tried with several different positions, but besides "fixed" I couldn't find a way to make it stay at the bottom (the problem with position: fixed now is that it overlaps with the wrapper when the screen gets smaller).

    0
    darryncodes•6,370
    @darryncodesPosted almost 3 years ago

    Hi @graciedevine

    Yeah sure and good call re the fixed position.

    I would:

    • add flex-direction: column; to your <body>
    • remove padding-left: 70px; from .card (this has nothing to do with the footer but helps the layout)
    • remove position: fixed; bottom: 20px; from .attribution
    • add add some margin: 1.5em 0; (this is shorthand for 1.5em top & bottom, 0 left & right) to .attribution to space things out a little

    I hope that is what you're looking for

    Marked as helpful
    1
  • Victor•510
    @therealmaduanusiPosted almost 3 years ago
    1. let the container of the grid have an equal fractional units(1fr 1fr 1fr)
    2. specify the width and use (text-align: center;) 3).whatever you named it :hover{ background-color: transparent; border: 2px solid hsl(0, 0%, 95%); color: hsl(0, 0%, 95%); } I hope this helped or you check my own and see if there's any thing you need THANKS. Also your trying, keep it up we are all learning don't stress to much OK.
    Marked as helpful
    1
    Gracie•50
    @graciedevinePosted almost 3 years ago

    @therealmaduanusi Thank you! I will give these a try!

    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