Stats preview card component using flexbox

Community feedback

• 

  Rosi•440

  @strosiPosted almost 3 years ago

  Hi @Harshi786, your desktop layout looks good, but there's something wrong in mobile view.

  Try to change the width of the .card elements to 100% in the media query and I think the screen max-width should be at least as wide as the .container element (1080px) because of the fixed size.

  I hope this will help for the current code.

  Marked as helpful

  1

  ---

  

  Harshita Jain•380

  @Harshi786Posted almost 3 years ago

  Hi @strosi, I have changed the width in desktop view but if I changes the width in mobile view then everything changes. Please check.

  Thanks for the help! :D

  0

  

  Rosi•440

  @strosiPosted almost 3 years ago

  Hi @Harshi786 :)

  I think in the mobile view

  • there's no need to set fixed width to the .hero, .hero-overlay and #cardone, leave them as they are in desktop veiw;
  • the width of the .card is left to 50% when the two elements acctually need 100% (only in desktop view they fill half of the container).

  This changes won't affect your current mobile view but if you set the .container {width: 100%} or some other percentage it will make it more flexible for narrow screens.

  You could also try to

  • set some max-width to the .container so it not getting too wide (e.g. max-width: 1110px for desktop and max-width: 400px for mobile);
  • themax-width of the media query I think should be greater;
  • remove the fixed height of the .container in desktop view. Use other way to add space under the bellow text;
  • the image for desktop view is different (there is another .jpg file);
  • I think using id for styles is not very proper...

  This is what I tested and it worked. Hope not to confuse you with this long comment and to be of any help. Keep coding :)

  Marked as helpful

  1

  

  Harshita Jain•380

  @Harshi786Posted almost 3 years ago

  Hey @strosi, I really appreciate your sincere efforts in helping me. Seems you absolutely love coding! :D

  I have covered all your points. I just had a doubt that the image is getting stretched in desktop view(at my screen width:1285px).

  I tried not to stretch the image but no other option than height:100% in .hero .desk_img.

  Hope to get your like. Thanks :)

  0
• 

  P

  Remus D. Buhaianu•3,125

  @MiculinoPosted almost 3 years ago

  Hey @Harshi786, good job on completing the challenge!

  Your solution looks good except for the horizontal scrolling on the smaller screen sizes. I think it's because you're using fixed px-based values for the width property. A better way is to use % and also use padding property.

  Try changing the way you implement the width property and see if it works.

  Marked as helpful

  1

  ---

  

  Harshita Jain•380

  @Harshi786Posted almost 3 years ago

  Hey @Remus432, is the code correct now?

  Thanks for the help :D

  0