Responsive card using Flexbox

Community feedback

• 

  Zineb Boutaa•750

  @zineb-BouPosted almost 3 years ago

  Hi Stefan,

  Here are some suggestions for your solution:

  • Instead of using <div /> for the image you can use <picture /> element this will allow you to set different versions of the image(desktop/mobile)

  • I noticed you included some CSS resting, check this modern CSS reset.

  • Adding a breakpoints ( min-width:1200px) I think it's a bit early for small screens, try to set it smaller (1200px meant to be for desktop devices)

  • Use rem or % to set the <.card/> width you will see it shrinking when transitioning between different screens.

  1
• 

  Stefan•180

  @st3wnPosted almost 3 years ago

  Hi man,

  just a little tip: You can give the left side of the container a padding-right: px; to get the text smaller. Or you put the h1 and paragraph in a div container and give the div container a width.

  Aswell you can check the width and height of the image by rightclicking it, click on the tab "details" and then see the px size of the image. Is the image for example 446px high, you set the container to a height of 446px. In your case the picture is a bit cut off.

  But overall pretty good!

  1
• 

  Stefan•180

  @st3wnPosted almost 3 years ago

  Yo Zineb,

  love it, thanks :)

  Can you still send me your CSS rest? Would be great!

  0