All comments

• 

  FunkyCreep•130

  @francoisbilletSubmitted over 1 year ago

  Hi, I just finished this component but I had a few issues/things that don't work out as I expected.

  1- I saw that in order to switch between 2 images depending on the device size, we could do it in 3 ways:

  • have 2 <img> in HTML and use display: none for the image we don't want
  • have a container and set its background-image to the image we want
  • use the <picture> HTML5 tag which was made for that purpose, doesn't need CSS but doesn't work in IE.

  Is there a preferred way of doing ? If so, why ?

  2- For the second way of doing (using a container and setting its background-image depending on the screen size), I found out that we need to set the width of the container to some dimension to make it work. Can we somehow set the container dimensions to the size of its background-image ?

  3- I struggled most with putting the background-color on top of the image. I tried setting 2 backgrounds, or having an overlay with an absolute position and an opacity inside my container next to the image, but the result wasn't as expected. The color isn't violet enough. How did you manage to do this ?

  4- Finally, on mobile device, there is a little space inside my container right below the image. I guess this is due to the image not being big enough to fill out the whole div. How can I fix this ?

  Thanks in advance for your answers. Have a nice day !

  

  Preview Card mobile-first & BEM

  1

  60
  

  jrickyrichard•200

  @jrickyrichardPosted over 1 year ago

  Hello, I think you can achieve that by setting your card as flex, by doing that you can use the flex order property to switch the flex element / content.

  .card {
      display: flex
  }
  
  .card_image_container {
     order: 2
  }
  
  .card_content {
      order: 1
  }
  

  Congrats for completing the challenge, You've done it really well.

  0