Skip to content
Submitted almost 2 years ago

product-preview-card-using-CSS-flexbox-and-grid

Yagyesh mani Tripathi•140
@YagyeshMani1498
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

Feedback welcome 🙂🙂

Community feedback

  • Rostyslav Nazarenko•560
    @rostyslav-nazarenkoPosted almost 2 years ago

    Hi! Nice and clean code!

    • change <div class="container"> to <main class="container">`
    • use relative units for the width of elements and for media queries (inside the picture element too). Change the font size in the browser to 18px and you will see the component break.
    • change height to min-height on the body element.
    • change overflow-x: hidden; to overflow: hidden;
    Marked as helpful
    0
    Yagyesh mani Tripathi•140
    @YagyeshMani1498Posted almost 2 years ago

    @rostyslav-nazarenko thanks for your suggestion 😊😊 can you please check it again ?

    1
    Rostyslav Nazarenko•560
    @rostyslav-nazarenkoPosted almost 2 years ago

    @YagyeshMani1498 checked looks good, one thing only. I'm not sure what this CSS reset does

    /*
  3. Allow percentage-based heights in the application
*/
html,
body {
  height: 100%;
}

    But it breaks the layout too

    keep coding

    0
    Yagyesh mani Tripathi•140
    @YagyeshMani1498Posted almost 2 years ago

    @rostyslav-nazarenko 1. Default value of height: auto; by this the container will grow its height as much as it needs to fit its child or content. by default ==>all html elements have height set to auto now----- 2. height: 100% -- means 100% of its parents height ; example: default html(height:auto), body(height:auto)

    <html> <body> <h1>hello</h1> </body> </html> if we set h1 { height: 100%} then it will check its parent's height that is body(height:auto) -- and for body height:auto means height to fit h1 element; so here body's height will be equal to h1's height , so h1 {height: 100%} will equal to h1 original height that means we are setting a value that is already exists so nothing will happen. you can check it by yourself too. that's why i'm setting html,body(height:100%) so that h1 can grow as much as to its parent that is body. here is the codepen link [codepen](https://codepen.io/yagyeshmani1498) i hope that it will help you understand.
    1
    Rostyslav Nazarenko•560
    @rostyslav-nazarenkoPosted almost 2 years ago

    @YagyeshMani1498 Thanks, I understand now. The issue is that it somehow restricts the height of the viewport and doesn't allow scrolling. Look at the browser, the mobile view is cut.

    1
    Yagyesh mani Tripathi•140
    @YagyeshMani1498Posted almost 2 years ago

    @rostyslav-nazarenko i think i should use min-height instead of height in /css-reset/ of html&body so that it can grow beyond its device height.

    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