Stats preview card component (Desktop First)

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Hey, good work on this one as well. The layout in desktop is good though in mobile state, the overlay that you made is somewhat not consistent at alignment.

  Suggestions:

  1. Please, always refrain from using height: 100vh or any declaration using vh especially when it is a container. Setting this limits your element's height based on the screen or the viewport's height. So if a smaller devices were to look at the site, then that user will get a different layout, because you are taking only 100% of that user screen's height. Instead use other units like rem or just let the children of the container give the container itself the proper dimension.

  2. If you followed the first mentioned, then it is better to add min-height: 100vh on the section itself. This basically adds a sort security, something like that, that will make sure it will take the whole viewport if it needs to, because it is the minimum height. Then add a padding to the top and bottom of the section as well.

  Now, regarding your query.

  What you can do is, remove the img-overlay element in your markup. Then add a background-color to the image selector. background-color: hsl(277, 64%, 61%); this will be good for that. After adding that, in your images, the two images, add a declaration to both of them. mix-blend-mode: multiply. The reason we are doing this is because, remember that I said to add background-color to the image selector, which is the container of those images. Well, it's so that the image can blend in the background of it. Blending with that color. After doing so just add opacity on the images and tweak it until you achieve the desired color.

  Overall, this is really great and no issue when resizing at all. If you need more help, just drop it here okay^^

  2

  ---

  

  E.N.M•70

  @EN-MPosted over 3 years ago

  @pikamart Thank you so much!! Your explanation was very thorough. You are amazing!!!!!! Thanks again.

  1