All comments

• 

  Timic Ivey• 300

  @Lwmeek

  Submitted over 2 years ago

  Is there a better way to center the whole card on the screen without using absolute positioning? Is there any best practices I can do better at implementing or any best practices I should be doing?

  

  I used flex for mobile mode and a grid for 1440px screen size.

  3

  50

  

  srglbrkchn• 260

  @srglbrkchn

  Posted over 2 years ago

  Hi,

  How about :

  .card_container { margin: 10px auto; }

  10px does not matter, it's margin of top and bottom, you can set it to 0 if you wish. The auto, centers the card, it represents left and right margin. And then you can remove position: absolute and left property.

  Happy coding!

  1
• 

  Samson Sham• 140

  @samsonsham

  Submitted over 2 years ago

  I got 2 questions in this challenge.

  1. I put a violet colour overlay on top of the image but the colour is way too difference from the design. Style guide has no instruction to that. How could I make the colour as the design does?

  2. I don't know how to determine the media query breakpoint for my responsive design. Style guide said Mobile: 375px, Desktop: 1440px. What does it mean? I try to use (min-width: 1440px) as desktop breakpoint but it doesn't seems to be a correct way to me. Could anybody give me some ideas how to start working with responsive design?

  

  Stats Preview Card

  4

  50

  

  srglbrkchn• 260

  @srglbrkchn

  Posted over 2 years ago

  Hey Samson,

  I guess the answer to your first question is this:

  img { background-color: hsl(277, 64%, 61%); mix-blend-mode: multiply; }

  you should set the background color of your image to the color you want to mix with your image, here it was hsl(277, 64%, 61%). And then set mix-blend-mode to multiply. They will get mixed and give you the color you wanted.

  About your second question, I do exactly what you did in your code, except I only specify the size of tablet and mobile, since desktop or bigger are the default design so I don't bother with them.

  Hope this helps.

  Marked as helpful

  1

  This comment has received 2 repliesShow
• 

  srglbrkchn• 260

  @srglbrkchn

  Submitted over 3 years ago

  

  Js Flexbox ...

  2

  10

  

  srglbrkchn• 260

  @srglbrkchn

  Posted over 3 years ago

  Thnx a lot. That was the impression I was aiming for.

  0
• 

  srglbrkchn• 260

  @srglbrkchn

  Submitted almost 4 years ago

  

  HTML, css

  2

  10

  

  srglbrkchn• 260

  @srglbrkchn

  Posted almost 4 years ago

  Hey, Found and fixed. Thanks for letting me know. Really appreciate it .

  0