Responsive business analytics card

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Atharva Hinge, congratulations for your new solution!

  I decide between flex or grid in base of the complexity, for example, if is a complex layout I use grid is is a simple component I use flex.

  In this case I choose grid because was easier to create the component with two colum, all I needed was max-width: 1000px and display: grid and grid-template-column: 1fr 1fr to have a component with two column with 50% of the parent.To add the exact same purple overlay effect for the image, matching the design files you can use, filter or mix-blend-mode. See the code below

  img {
  mix-blend-mode: multiply;
  opacity: 70%;}
  

  👋 I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Atharva Hinge•80

  @36atharvaPosted about 2 years ago

  @correlucas thankyou so much sir!

  1
• 

  David•8,000

  @DavidMorgadePosted over 2 years ago

  Hey Atharva, congrats on completing the solution of this challenge

  Regarding your question, I personally use more flex but because is easy to pull out the trick for most of the cases that positioning is needed, and use grid for more complex-multiply columns or rows layouts, for example, for an e-commerce product list I would probably use grid, but for a 1 row navbar I will use flexbox.

  Also regarding your project, you should try using this as your pseudoelement color on your image and see if it looks better: background-color: #AB5CDB; mix-blend-mode: multiply;, I think this one is closes to the design one!

  Hope my feedback helps you!

  1

  ---

  

  Atharva Hinge•80

  @36atharvaPosted about 2 years ago

  @DavidMorgade flex is bit handier than grid when it comes to positioning :)

  1