Responsive card using HTML, css, flex, BEM, coffee.

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Hey, great work on this one. Though need to zoom out because your text are current overflowed from the container. Layout is good and the mobile state is good as well.

  @brasspetals already mentioned key points^

  For other suggestion/s :

  1. I really recommend for you NOT to use vh as a unit especially in a container or an large component. The reason that I had to zoom out, is because you declared height: 60vh on your card selector. What happens is that it limits the size, based on the viewport's height. So if a user have a small desktop or gadget height, then they will also get the same effect, which is the overflowed content. I suggest that you use other units like rem and give a fixed height, or let the element inside it, give the container the dimension it needs. Please refrain from using such declaration.

  Only that one. Overall, great job^

  1

  ---

  

  Raelinda•160

  @RaelindaPosted over 3 years ago

  @pikamart That’s good to know. I’m trying to learn best practices as I gain knowledge and I really appreciate you taking the time to give me this feedback. — Raelinda

  0
• 

  Anna Leigh•5,135

  @brasspetalsPosted over 3 years ago

  Hi, Raelinda! 👋

  You can still use mix-blend-mode on an img or picture element, which actually makes things a lot easier here, since to achieve the look of the design you need a combo of mix-blend-mode: multiply and opacity. If both the color and image are set as backgrounds to the same div, you can't get it quite right.

  In this instance, you could have an img or picture tag wrapped in a containing div. The containing div's background would be set to the purple color, and mix-blend-mode and opacity could be set on the image to achieve the look.

  Using and img or picture element also makes handling the height/width of the image div MUCH easier, especially when it comes to responsiveness. Having to control the dimensions of an empty div is often a pain.

  1

  ---

  

  Raelinda•160

  @RaelindaPosted over 3 years ago

  @brasspetals Thank you so much for that helpful advice! :) — Raelinda

  0