Skip to content
Submitted over 2 years ago

Display Flex centering Perfume challenge

Christopher Portorreal•90
@crixfer
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Centering and putting the image aside of the white box, then centering the text in the right-sided white box.

I tried adding Bootstrap coding, but it broke my codes every time. I need more practice.

What do you recommend to do these kinds of positioning and sizing without using so many codes? I really appreciate any help you can provide.

Code

Please log in to post a comment

Log in

Community feedback

  • Harshit Joshi•120
    @TheFoxian

    Hey Christopher, congratulations on completing the challenge.

    Here are my few findings, you have used two images and displaying one image with hiding another at media breakpoint makes sense but it is not a good practice, instead use HTML source tag. Read more about HTML Source tag.

    Other than this you have used display flex directly to the main tag. This is not a good practice, instead use a div inside of main and wrap all the content inside it and apply the respective css to that wrapper. Read more about centring any element using flex

    Although you have used max width 600px but there are few standard for media breakpoints. Please refer this for better understanding -

    1. 320px — 480px: Mobile devices
    2. 481px — 768px: iPads, Tablets
    3. 769px — 1024px: Small screens, laptops
    4. 1025px — 1200px: Desktops, large screens
    5. 1201px and more —  Extra large screens, TV

    Keep up the good work! Enjoy coding :)

    Marked as helpful
  • generieyyc•160
    @generieyyc

    Hello! I'm sharing the feedback i got before.

    For proper centering the container (whole card) vertically and horizontally, you can use code as:

    body { min-height: 100vh; display: grid; place-content: center; }

    Hope that helps!

    Marked as helpful
  • Tamana•210
    @Tamana123-2

    Hello Mr. Christopher Portorreal! Great job for completing the challenge. In your mobile design you could use grid, for being more flexible with desktop version instead of flex. You can add the image of desktop design in HTML file with a media of (min-width: 600px) and in you CSS file you could go with (grid-template-columns: 1fr 1fr) for making the perfume image and content side by side. Go ahead even if it is hard to get. Nothing is easy to achieve. Nice time.

    Marked as helpful
  • Luca Liebenberg•180
    @lucaliebenberg

    hello, just for some extra feedback:

    If you want to centre the card - for desktop and mobile - you can use /* display: flex; height: 100vh; justify-content: center; align-items: center; */

    This for the body element, you can target directly in css:

    body {

    }

    I hope this has helped!

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