Skip to content
OverviewSolutions
2
Comments
2
Zorah
@ZorahScope

All comments

  • Zorah•20
    @ZorahScopePosted over 2 years ago

    This looks sweet. Can't be too in-depth on my feedback since I haven't learned CSS grid yet.

    But I'd say the only thing that stands out to me would be that the body or html element doesn't fill out the full viewport. Which explains the noticeable difference in the overall height when using the slider to compare the design vs your solution.

    body {
    min-height: 100vh;
    min-width: 100vw;
    /* other declarations stay the same */
}

main {
    margin: 10rem auto;
    /* other declarations stay the same */

    Something like this, but would center using flexbox or grid vs explicitly defining margin.

    Also went from H1 then skipped to H4, there's no H2 or H3. I'm guessing you opted for H4 for the smaller font size, but this can be don't by adjusting the font-size directly. Heading elements should follow as intended from "Most important > least important"

    0
  • Zorah•20
    @ZorahScopeSubmitted over 2 years ago

    1. How would I go about applying the image overlay hover using flexbox?

    2. The .container div had an additional 5px of height vs it's containing image , causing the overlay to bleed past the image a bit. Granted I found a solution with height: calc(100% - 5px); I don't understand why this was a thing.

    3. What are common best practices for structuring/organizing CSS? ( Besides loosely following the HTML order in terms of how I declared CSS, it's more or less spaghetti)

    Plain-CSS Responsive Nft Card Component

    2
    Zorah•20
    @ZorahScopePosted over 2 years ago

    Unsure how to avoid this issue with making the view art overlay clickable

    https://dequeuniversity.com/rules/axe/4.3/link-name?application=axeAPI

    0