Stats preview card component using flexbox

Community feedback

• 

  T

  Grace•31,250

  @grace-snowPosted almost 3 years ago

  You’ve already had lots of feedback on the layout and image color so I won’t go there 😊

  But let’s sort the html!

  • remove all brs from the heading and paragraph. Let lines wrap where they need to. Brs will be read out by screenreaders and they are causing line breaks in really weird places on my mobile. You can’t accommodate for every screen size so it’s rare you’ll ever need to use them.
  • headings cannot skip levels, they must go in order. Headings are the most important elements for giving structure to your page, so don’t forget that on future challenges where you’ll need more headings.
  • that said, this challenge only needs one heading. The numbers on the 3 stats don’t make any sense as headings (would you understand what content to expect if you saw “10k” as an item on a contents page? Nope). Instead, those stats need to be an unordered list with 3 list items. You can wrap the numbers in a span or strong tag with a class to display them block or whatever other styles you need. But definitely not headings and paragraphs for these.
  • alt text on images needs to be a brief description of the image. Imagine you can see the image and you need to describe it quickly to someone sitting opposite you who can’t see the image themselves. That’s what alt text should be if it’s a meaningful image.

  I hope this helps

  1

  ---

  

  Abhishek Waghmare•30

  @abhishekdwaghmare2000Posted almost 3 years ago

  @grace-snow Thank you, for your valuable suggestion and improvements, I will definitely work on this issue and fix it. Thanks again!

  0

  

  T

  Grace•31,250

  @grace-snowPosted almost 3 years ago

  @abhishekdwaghmare2000 on rechecking it doesn’t look like you’ve had feedback on the sizing / mobile responsiveness of this yet. This doesn’t look fully responsive to me at all yet. It is overflowing with some written content cut off on mobile landscape, and content touching all screen edges and not arranged at all like the design on mobile portrait.

  It’s worth pausing before moving on to any other challenges and taking time to refactor and fix all this properly. It will be essential to get these things right in all challenges in future.

  Take your time, be methodical and check against the design often.

  A good way to work is have devtools open on the side of your browser. Using that and zoom you can resize the browser window a lot to check everything looks as it should at all screen sizes. Remember media queries should happen at the point the layout has room to change, not before

  1

  

  Abhishek Waghmare•30

  @abhishekdwaghmare2000Posted almost 3 years ago

  @grace-snow Hello grace, can you give at which dimensions like pixel 5 dimention the mobile responsiveness is breaking ? I checked on all dimensions and I unable to figure out the responsiveness issue. Can you tell at which breakpoint the responsiveness is not working or on which mobile device or some clue so that I can work on that issue and fix it. It would be really helpful if you clarify more about this. Thank you for pointing out this responsiveness issue. Thank you!

  0

  

  T

  Grace•31,250

  @grace-snowPosted almost 3 years ago

  @abhishekdwaghmare2000 you're asking the wrong question here. Open devtools on the side, and shrink the viewport down. You'll see the layout breaks in several places

  1

  

  T

  Grace•31,250

  @grace-snowPosted almost 3 years ago

  You should not be setting height on the card, and should be using max-width not width. The large margins are causing problems...

  Overall it looks like you're making this all a lot more complex than it needs to be.

  I would put the image in the html instead of background image as that is much easier to manage. All this challenge should be doing is changing a max-width value, flex direction and some text alignment between mobile and desktop

  .content-left looks like it's using margin when it should be using padding. And other elements seem to have both, but I don't know why. It seems like you're getting confused between the two maybe

  Your media query should not be using a min and max width. It should only be one or the other, depending on whether you're working mobile first or desktop first

  Line height should be unitless

  And one really important thing to change is the bad habit where you are nesting css selectors several levels deep. You'll want to keep css specificity as low and flat as possible - that means using single class selectors wherever possible

  Marked as helpful

  1

  

  Abhishek Waghmare•30

  @abhishekdwaghmare2000Posted almost 3 years ago

  @grace-snow Thank you for pointing out and clarifying all this points. I will work on this issue and fix this. Thank you!

  0
• 

  reza•60

  @rezaboxPosted almost 3 years ago

  hi can you use background-color:linear-gradient, to use color of the picture and ok the picture

  1

  ---

  

  Abhishek Waghmare•30

  @abhishekdwaghmare2000Posted almost 3 years ago

  @rezabox Thank you, for your valuable suggestion I will work on that issue and fix that. Thanks again!

  0
• 

  darryncodes•6,370

  @darryncodesPosted almost 3 years ago

  Hi Abhishek,

  Awesome solution, very responsive - well done!

  Some great feedback from Buhaianu.

  Another solution to the colour is keep your current mark up but try:

  • For your image - remove background-color: hsla(277, 64%, 61%);. Add mix-blend-mode: multiply; and add display: block; for the little line that is created on the mobile view
  • Add background-color: hsla(277, 64%, 61%); to .content-right

  Also

  • overflow: hidden; is needed to your .card class to make sure the border-radius is visible on all corners

  Hope that helps!

  1

  ---

  

  Abhishek Waghmare•30

  @abhishekdwaghmare2000Posted almost 3 years ago

  @darryncodes Thank you, for your suggestions, it is going to be really helpful for me to fix this issue and work on this code refactoring. Thanks again!

  0
• 

  P

  Remus D. Buhaianu•3,125

  @MiculinoPosted almost 3 years ago

  Hey @abhishekdwaghmare2000, good job on completing the Stats Preview Card challenge!

  I had a look at your final solutions and here are a few suggestions I have for you:

  • Consider implementing the responsive media query breakpoint sooner (i.e at a larger size)

  • The top right and bottom right edges of the image should be rounded (same value for the card's left side)

  • Increase line-height and font-size of the p element inside .content-left

  • Use the values 100, 400, and 700 for your font-weight property

  • Use actual values (or variables) for your font-size property. Don't use small, medium` or other such keywords

  • Setting a background-color property on your img element and using it with mix-blend-mode won't work because mix-blend-mode is actually blending the img element with the card's background color. A possible solution is to remove the img element and just add a background image on the .content-right div and then you can use background-blend-mode to create the desired effect

  Hope these suggestions will prove useful. Keep up the good work!

  1

  ---

  

  Abhishek Waghmare•30

  @abhishekdwaghmare2000Posted almost 3 years ago

  @Remus432 Thank you, for your brief and helpful suggestion, I will definitely work on this issue and fix it. I am also stuck at last suggestion and you cleared that, Thanks again!

  1