Responsive card using CSS Grid & CSS Flexbox

Community feedback

• 

  aropsta•110

  @aropstaPosted almost 3 years ago

  The purple color doesn't look as bright as the original design. You should use mix blend mode on your pseudo element like this

  .image::before {

  content: ''; position: absolute; inset: 0; background: var(--soft-violet); width: 100%; height: 100%; mix-blend-mode: multiply;

  }

  The rest of the code can be found here. I haven't done the mobile site though :-) https://github.com/aropsta/card_data-analytics-statistics

  Marked as helpful

  1

  ---

  

  Sebastián León•100

  @lionnsPosted almost 3 years ago

  @aropsta Interesting. I didn't know that this property exist. I will apply since now in all my projects. Thank you for your feedback. 🚀

  0

  

  T

  Grace•31,090

  @grace-snowPosted almost 3 years ago

  @aropsta you don't need all that pseudo content in the snippet you shared. Just the mix blend mode opacity and a background color will acheive the effect on the image fine. It should be background-blend-mode though not mix-blend-mode. That would be for when the image is in the html, not when it's a background image

  1
• 

  T

  Grace•31,090

  @grace-snowPosted almost 3 years ago

  Hello

  A few suggestions for you

  • you don't need that pseudo element on the background image. You can place a background image and a background color (and background blend mode) all on the same element
  • 62.5% font size makes me cry when I see it. You've mitigated against the huge potential accessibility issues in this case by rounding the body size back up in rem but don't forget not all elements will inherit font size so you are introducing potential fails of you forget to increase font size again on those elements in larger projects. There is no reason in the modern web to make 1rem equal 10px, it really brings no benefits
  • the html for the stats needs work on this. Never have text in divs or spans alone, always meaningful elements. If you turned the styling off on this and just thought about the raw content, those 3 stats would almost certainly be a list with 3 bullets. That means the most appropriate html choice here is an unordered list with 3 list items (and remove the paragraph tags wrapping each number)
  • most important of all - stop nesting css selectors! You are massively increasing css specificity at the moment and that will inky cause problems. Stick to single class selectors as much as possible and try to keep your css specificity nice and low/flat
  • it's not wrong to use grid for this but an unusual choice. The layout is only going along one axis, so y ok u could acheive the exact same with less css using flexbox (the only thing that changes between mob and desktop is the flex-direction, or simply adding display flex on desktop)

  I hope this is helpful

  Marked as helpful

  0

  ---

  

  Sebastián León•100

  @lionnsPosted almost 3 years ago

  @grace-snow Thank you so much Grace,

  I apply everything you said. You were right about CSS grid. Also I tried to improve HTML with the unordered list, but I don't know if the span is a good practice in this situation.

  Your feedback is excellent, it helps a lot to improve development. Everyday I learn something new. 🎢

  0
• 

  P

  David Turner•4,150

  @brodiewebdtPosted almost 3 years ago

  You did a good job with this, the desktop version looks great. I would set the mobile version to a max-width of about 450px. In your media query(960px) set it to the max-width: 1050px. That will keep the mobile version from stretching like it does now.

  Hope this helps.

  0

  ---

  

  Sebastián León•100

  @lionnsPosted almost 3 years ago

  @brodiewebdt Sorry Davin. This changes will improve the tablet version or something?. Is not clear for me. Thank you for your feedback

  0

  

  P

  David Turner•4,150

  @brodiewebdtPosted almost 3 years ago

  @lionns At Ipad dimensions the card is stretched too wide. Keep it at 450px max until it switches at the 960px media query. The mobile version will show at Ipad resolution which is fine.

  Marked as helpful

  0

  

  Sebastián León•100

  @lionnsPosted almost 3 years ago

  @brodiewebdt Ohh. Understood. You're right. Thank you so much. 💡

  1