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
@steeven509
Posted
@grace-snow Thank you very much, you are really sincere in your feedback.
@SilverWings47
Posted
@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.
@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
@SilverWings47
Posted
@grace-snow Using the image in the HTML, how do you change the image file depending on whether you're on desktop or mobile ?
@SilverWings47 picture element or img srcset
