Responsive card using hmtl, css , flex-box , grid

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted almost 3 years ago

  Hi

  This breaks for me on mobile landscape- the image and stats disappear. Usually this is caused by a height 100vh instead of min-height

  Additionally, on mobile portrait, content is hitting all screen edges, and the last stat is touching the bottom of the card. There should always be some space around these components, like the design.

  Looking at your css I can see you’re setting explicit heights and widths. Don’t. There is no reason to set height on components like this, sometimes min height but that is rarely needed. Let things be the height they need to be based off their content.

  Similarly, use max width for the card not width. Let it shrink if it needs to. You don’t know the screen size or font settings someone might be using.

  On the topic of font size, make sure you always use rem (a responsive unit) not px

  Marked as helpful

  3

  ---

  

  steevencode•120

  @steeven509Posted almost 3 years ago

  @grace-snow Thank you very much, you are really sincere in your feedback.

  1

  

  Sami NASRI•240

  @SilverWings47Posted almost 3 years ago

  @grace-snow But with the Div that holds the background image, you have to set the height and width explicitly for it to be displayed, otherwise it will not show because the Div has no content.

  0

  

  T

  Grace•31,270

  @grace-snowPosted almost 3 years ago

  @SilverWings47 not true. You can use min height/width

  But you’re right that this would be much easier with the image in the html, and I don’t think it warrants being a background image for this design. It’s making more work for no benefit using background img in this case

  0

  

  Sami NASRI•240

  @SilverWings47Posted almost 3 years ago

  @grace-snow Using the image in the HTML, how do you change the image file depending on whether you're on desktop or mobile ?

  0

  

  T

  Grace•31,270

  @grace-snowPosted almost 3 years ago

  @SilverWings47 picture element or img srcset

  1