Stats preview card component

Community feedback

• 

  T

  Chamu•13,130

  @ChamuMutezvaPosted almost 3 years ago

  Greetings Meshach

  • for the overlay , look into css blend modes. You can do that without the additional overlay div.

  .column-2 {
  	background-image: url(./images/image-header-desktop.jpg);
  	background-size: cover;
          background-color: #aa5cdb;
  	overflow: hidden;
  	width: 1300px;
  	border-radius: 0 10px 10px 0;
  	background-blend-mode: multiply;	//try other values to get best results
  }
  
  .overlay {
  	/* width: 100%; */
  	/* height: 100%; */
  	/* background: #aa5cdb; */
  	/* opacity: 0.55; */
  	/* background-blend-mode: overlay; */
  }
  

  for further reading see css blend modes

  • the image is not showing on mobile because there is no height on either the container image div or the image itself. On desktop it shows because the parent div is assuming the height of the other sibling due to the flex direction of row.
  • your headings should follow a sequential order. Do not skip headings and as always let the h1 be the first heading element.

  Marked as helpful

  0

  ---

  

  Meshach Aderele•40

  @CMconsultsPosted almost 3 years ago

  Thanks a lot @ChamuMutezva. It worked.

  0
• 

  P

  Jessica•880

  @perezjprz19Posted almost 3 years ago

  There is a couple of ways to do it...

  • You could try mix-blend-mode: multiply and opacity of about 75% or 80%

  • you can try mix-blend-mode: multiply with filter.

  This is how I did mine

  As far as why is not showing up on mobile.... I'm not sure. I don't have time to play with the code right now 😅

  Marked as helpful

  0

  ---

  

  Meshach Aderele•40

  @CMconsultsPosted almost 3 years ago

  @perezjprz19 Thank you

  0