3-column preview card component (mobile first)

Community feedback

• 

  P

  Nikitossik•370

  @NikitossikPosted almost 2 years ago

  Hey, congrats on completing the challenge! I think the problem is, that .button__text color overrides the color that you add directly to the .button on :hover

  You can do .button:hover .button__text {...} and there change the color.

  Also you can remove p from button and change the color directly for it, so nothing that goes higher in the cascade or has more accurate class could override the styles

  happy coding)

  Marked as helpful

  1
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  to center #wrapper on the page using flexbox or grid instead of a 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.

  To center #wrapper on the page using flexbox:
  body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  

  To center #wrapper on the page using grid:
  body{
  min-height: 100vh;
  display: grid;
  place-items: center;
  }
  

  For the hover effect for the button , give button:hover a cursor values of pointer, a border solid 3px hsl(0,0, 95%) and font-color of hsl(0,0, 95%).

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  0