stats preview card HTML, CSS

Community feedback

• 

  hitmorecode•6,680

  @hitmorecodePosted about 1 year ago

  Nice well done, just a few things

  • The overlay color is not matching the one on the design, here is how you can fix it (see below)

  .background-color {
      width: 100%;
      height: 100%;
      opacity: 0.5; /* change to 0.8 */
      position: absolute;
      background-color: hsl(277, 64%, 61%); /* change it to this color */
      mix-blend-mode: multiply; /* add this line */
      z-index: 100;
  }
  

  • Your media query breakpoint should be much larger, otherwise when going to small screen size there will be overflow. Change it to 1010px

  Marked as helpful

  0

  ---

  

  Bartosz•240

  @silvertalPosted about 1 year ago

  @hitmorecode Thank you for feedback. The overlay color was the thing i struggled the most, i jus couldn't figure it out. Is it common to use 1010px for media query for smaller screens?

  0

  

  hitmorecode•6,680

  @hitmorecodePosted about 1 year ago

  @silvertal The breakpoint for the media query it depends on the content of the page. For example the width of your card is 1000px, if the breakpoint is lower (let's say 400px).

  If you go to a screen size of 700px, this means that 300px of content will be of the screen, creating overflow on the page. This will go on until the screen size is 400px, this is when the media query activates.

  So you adjust the breakpoint according the content. When on dev tools adjust the screen unitl the edges of the screen touches the content, that will be your breakpoint.

  Marked as helpful

  0