Stats preview card component

Community feedback

• 

  P

  Rupali•780

  @rupali317Posted 6 months ago

  Hello @dewyrag

  Good work!

  To answer your question on how to remove that gray border, I would suggest you remove the following width definition from these classes:

  • width:100% from .desktop-img class
  • width:100% from .mobile-img class
  • width:70% and width:80% from .container class

  The above are not required. If you can, avoid setting a fixed width for images as it is not ideal for responsiveness. It is better to use min-width and max-width to make elements responsive. But in your case, these widths are not needed.

  Moreover, consider altering the border radius for img tag as border-radius: 0rem 0.5rem 0.5rem 0rem and .container class border-radius: 0.5rem. This is to ensure that the img's border radius and container's border-radius match according to the design's version of border radius. I suggest you use rems instead of pixels as rems are better for scalability. In larger screens, the border-radius may look off with the usage of pixel. With rem, the look will be smoother.

  Let me know if the suggestions work.

  Marked as helpful

  1

  ---

  

  dewyrag•210

  @dewyragPosted 6 months ago

  Thank you so much this all helped, the only thing is that the width on the container is how I controlled the size of the component. So if i take it away it takes the whole width of the body, is there another way around this? Could i just add padding to the body?@rupali317

  0

  

  P

  Rupali•780

  @rupali317Posted 6 months ago

  @dewyrag You can add padding to the body so that it does not occupy the entire screen. However, a better strategy is to put like a min-width for the main card. That was the strategy I followed. You may refer to how I approached it:

  Github solution Live URL

  Marked as helpful

  1