Stats preview card component with html, css, flexboxes,...

Community feedback

• 

  Anmol Kapil•655

  @anmolkapilPosted over 3 years ago

  I can't access your code on github. It is showing Page not found error.

  I did a simple inspect element on your website and found the reason for your issues.

  1. Your text section has 5% padding. padding is getting added to the 50% width. Use "box-sizing: border-box" property to fix this issue. Read here: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

  2. Don't use pseudo element. Apply both background image and background color and then use image blending. https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

  Marked as helpful

  5

  ---

  

  Floripin•60

  @FloripinPosted over 3 years ago

  @anmolkapil thanks for those nice solutions! Just applied them, works great!

  0

  

  Anmol Kapil•655

  @anmolkapilPosted over 3 years ago

  @Floripin I'm glad it helped.

  0
• 

  Smita•395

  @Smita-14Posted over 3 years ago

  Hey Floripin! I too met with these scenarios and I was able to fix it so I'll try my best to help you out here:

  1. If you add max-width:40% to the text class, it will allow both the image_container and text class to fill in the 50/50 space. But sorry I am not sure why that happens. This could be because of the paddings and margins or it could be that the text area is taking as much space it wants and so does the image_container. Here the image does has a limit ( it has fixed pixels whether or not you specify it) but the text part doesn't so it takes the leftover space after the image_container is done taking the space it needs.

  2. The image is an inline element so properties like line-height and font-size would affect it. Setting display:block or display:inline-block would solve the issue. StackOverflow | IMG has 5px extra padding at bottom of div

  I hope that helps.

  Marked as helpful

  0