Skip to content
Submitted over 1 year ago

using css flexbox

Enis67•140
@Enis67
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

need some help

Community feedback

  • C H A R A N 🎯•2,670
    @0xabdulPosted over 1 year ago

    Hey there ! 👋 Congratulations you finished the Product preview card...🎉

    • some suggestions for you improve your code

    Html 🏷️:

    • for Accessibility reports you using the and div tag to wrap the whole html code and put attribute role="main" is correct way 🎯 and using the header tag those all are problem to occur the Accessibility reports for example...
    <body>
<div class="container" role="main">

//Whole html code

<h1> </h1>
<h2> </h2>
<h3> </h3>
//by ordering using the header tag

</div>
</body>
    • In CSS 🎨:
    • the result summary card the not center aligning because you not using the felx center and height width in body section etc.. so the reason error occurred in the project for example
    body {
display : flex;
align-items: center;
justify-content : center;
height : 100vh
max-width : 100%;
overflow-x : hidden;
}
    • I Hope it's useful for you and wating for your next project ❤️
    • Happy Coding 😃
    1
  • Hassia Issah•50,650
    @HassiaiPosted over 1 year ago

    Replace <div class="row"> with the main tag to fix the accessibility issues. click here for more on web-accessibility and semantic html

    There is no need to give .row a height value, margin value and justify-content.

    To center .row on the page using flexbox or grid instead on margin, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

    USING FLEXBOX:
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

    USING GRID:
body{
min-height: 100vh;
display: grid;
place-items: center;
}

    For a responsive content give . row a fixed max-width value. max-width:500px , there is no need to give it a height value rather replace the height in .textbox with a padding value for all the sides, this will prevent the content from overflowing on smaller screens and its a responsive replacement.

    You forgot to add a media query for the mobile design. For more on media queries, click here

    Hope am helpful.

    Well done for completing this challenge. HAPPY CODING

    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