Design a 3-column preview card using html and css

Community feedback

• 

  P

  Carlos Samuel•330

  @CrtykwodPosted about 1 month ago

  Hello, @Eleniyancode! Congratulations on completing the challenge! The HTML is well structured, but you shouldn't have more than one <h1> in your code.

  Now, about the responsiveness of the page, it's good, but it could be better, media-queries are very limiting and you can almost always replace them with other resources, so, in your main, I would keep the grid as it is, but increase the width, and set it to max-width: 30rem, so the layout remains adequate even on slightly larger screens.
  As for @media (min-width: 40rem), I recommend you do it this way:

  @media (min-width: 40rem) {
    max-width: 60rem;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  

  This completely removes the need for @media (min-width: 60rem) and allows for a more responsive and dynamic design based on the device's screen size.

  Marked as helpful

  1

  ---

  

  Abdulrahaman Ridwan Ayinla•290

  @EleniyancodePosted about 1 month ago

  @Crtykwod GM boss, thanks for taking a look at my code and for the feedback, i will implement your suggestions and repush my code, please let me know whether it look better

  1

  

  P

  Carlos Samuel•330

  @CrtykwodPosted about 1 month ago

  Well done with the improvements, @Eleniyancode!
  The design looks a lot better!!!!

  You're using margin bottom and margin top in the main, which, on some screens, causes the content to stick to the side of the screen and have a weird border on the top.
  This is more of a design decision, so if you prefer the content to occupy the entire screen, remove the margins.
  Now if you want the content centered and separated from the background of the page, you can set margin: 20px 15px (15px side margin), or you can replace max-width: 30rem with something like max-width: min(30rem, 95%) and max-width: 60rem with `max-width: min(60rem, 95%).

  Marked as helpful

  1

  

  Abdulrahaman Ridwan Ayinla•290

  @EleniyancodePosted about 1 month ago

  @Crtykwod I am grateful for checking the code again, I will implement the observation you made right and away and push the changes again, thank you but can I ask if you can at least drop me your email or any social accounts that I can use to communicate with you, I will so much appreciate your guidance towards my aim of becoming an expert frontend, thank you once again

  0

  

  P

  Carlos Samuel•330

  @CrtykwodPosted about 1 month ago

  @Eleniyancode ofc, call me on discord, my username is crty. ^-^

  Marked as helpful

  1

  

  Abdulrahaman Ridwan Ayinla•290

  @EleniyancodePosted about 1 month ago

  @Crtykwod Thank you boss

  0