Flexbox

Community feedback

• 

  Jithu S Nair•30

  @jithusnairPosted about 3 years ago

  Hi, I am not sure that the card is shrinking. <main> has a constant width and so it doesn't shrink or expand, not anything I can see anyway.

  I can tell you a few things I did notice.

  • The percentage height on <img> might be unnecessary. Removing height: 32% should not cause any issues and <img> should auto adjust its width and height.
  • No need to give the same border radius as the entire card for <img>. Instead, write overflow: hidden; on the card. By doing it this way, in-case you feel like changing the border-radius you just need to change it at one place - on the card.
  • To make body occupy, at minimum, the entire width and height you can just use min-height: 100vh; on body and it should occupy 100% width by default and therefore min-width may not be required.
  • I believe you meant to write <article> and not <aritcle>.

  Hope this helps.

  Happy coding.

  1

  ---

  

  Edward•10

  @Coding-EdwarPosted about 3 years ago

  @jithusnair, Thanks! I appreciate your feedbag!

  0
• 

  P

  Fluffy Kas•7,715

  @FluffyKasPosted about 3 years ago

  Hey, it looks good, but I'd say there's an unnecessary amount of styling on your buttons ^^ I'd get of the underlines at least!

  Regarding the alt texts, you don't need to include words like icon, image, graphic, etc, the screen reader will announce that it's an image anyway!

  Not sure I understand your shrinking problem. Your card is not shrinking at all, it has a fixed width. If anything, shrinking is desirable. Using max-width instead of width would make it more responsive. The smallest smartphone's screen size is probably around 320px-ish, so it's nice to take that into consideration I suppose.

  0