All comments

• 

  Ernest Push Gbaboh• 460

  @gbabohernest

  Submitted over 2 years ago

  Hi 👋 kindly check this out and give me your feedback. 👍👍

  

  Mobile First Responsive Testimonials-Grid-Section | Build wit Css-Grid

  2

  20

  

  Zorah• 20

  @ZorahScope

  Posted 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

  This comment has received 2 repliesShow
• 

  Zorah• 20

  @ZorahScope

  Submitted 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

  40

  

  Zorah• 20

  @ZorahScope

  Posted 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