Skip to content
Submitted about 2 years ago

most of the use their was of flex box

Ahmar A•20
@Ahmer010
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

I couldn't figure out, how to center it in the page?

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted about 2 years ago

    Hi @Ahmer010 👋, good job for completing this challenge and welcome to the Frontend Mentor Community! 🎉

    Here are some suggestions to improve your code:

    • Try to fix the issues indicated by the report in this solution.

    • Add these lines in the <head> to display the site properly based on user's device:

        <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    • There are two modern CSS techniques to center elements:

    Using flexbox layout:

    body {
   margin: 0;
   width: 100%;
   min-height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
}

    Using grid layout:

    body {
   margin: 0;
   width: 100%;
   min-height: 100vh;
   display: grid;
   place-content: center;
}

    More information:

    .

    • Don't name your class with camelCase use naming conventions to name it

    • Add a box-shadow to the main container

    • The tag <div> is used to defines a section in an website. It is used to have a container styled with CSS, set special alignment or the content needs a special positioning.

    You could use more the <p> tag, the <p> element is paragraph level content, usually text

    <p>A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL</p>

    I hope those tips will help you.

    Good Job and happy coding !

    Marked as helpful
    2
    Ahmar A•20
    @Ahmer010Posted about 2 years ago

    @MelvinAguilar Thanks Man. Really Appreciate your response :)

    1
    Ahmar A•20
    @Ahmer010Posted about 2 years ago

    @MelvinAguilar using div instead of 'p' is comparatively easy and controlling it according to my experience.

    0
  • Duchessa•70
    @duchessa01Posted about 2 years ago

    ** Hello!**

    • I suggest using <main> instead of a div class named Main

    Little tip: never use uppercase when naming classes.

    • To center everything you need to add these properties to body:
    display: flex;  
flex-direction: column;    */ is needed to display content in columns and not rows /*
justify-content: center;   */ it align everything on the main axis /*
align-items: center;   */ it align everything on the cross axis /*
min-height: 100vh;   //an height is needed to align vertically or align-items won't work.

    Other than that I suggest:

    • Removing every width: fit-content; and height: fit-content; width: inherit; height: inherit; and instead just setting width: 100% height: 100%; in .product-img
    • You can set font-family: 'Montserrat', Arial; on body and remove it elsewhere.
    • Move the background-color of body from the HTML to CSS.

    Later on start adding the hover effect on the button and reading about indentation and how to properly format your HTML.

    Good job! I hope I was of help! :)

    Marked as helpful
    1
    Ahmar A•20
    @Ahmer010Posted about 2 years ago

    @duchessa01 Thanks for describing it more

    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