Three Column Preview Card using flex

Community feedback

• 

  Jefferson V. F.•330

  @JorggyhPosted about 2 years ago

  You missed adding the hover effect on the buttons, add this, if I didn't miss anything, it should work:

  .btn:hover,
  .btn:focus {
    cursor: pointer;
    border: 2px solid hsl(0, 0%, 95%);
    color: hsl(0, 0%, 95%);
    outline: none;
  }
  
  .btn1:hover,
  .btn1:focus {
    background-color: var(--Bright-orange);
  }
  
  .btn2:hover,
  .btn2:focus {
    background-color: var(--Dark-cyan);
  }
  
  .btn3:hover,
  .btn3:focus {
    background-color: var(--Very-dark-cyan);
  }
  

  The result was good, congratulations.

  Marked as helpful

  0
• 

  Assurance Chioma Ikogwe•410

  @Aik-202Posted about 2 years ago

  Hi Baskaran, Nice work!. I have some suggestions though :

  1. Change the div with class container to main as every html page must have a main tag.
  2. For the Mobile mode(@media(max-width:600px)), there's an issue, there's too much space at the top. Then I noticed fir the desktop you set the margin top and bottom to 20em with margin-top: 20em auto. Reduce the margin-top for the mobile mode ... It's too much.
  3. I noticed you were actually using the margins above to center the container?. If that's right, it's better to set justify-content: center and align-items: center in your css. This will center your container.
  4. Also, try and adjust the max-width of your container for mobile mode, they seem too big.

  Hope this helps, please update your solution when you make the changes.

  Marked as helpful

  0