Search code examples
htmlcssflexboxmobile-website

card doesn't look consistent on different mobile devices

I am trying to improve my CSS skills by designing few components. Here, I have designed an article preview component in HTML, CSS, and JS. But the card looks small on some devices and has too much margin. But on other devices, it looks good.

How can I remove this inconsistency?

code sandbox link : https://codesandbox.io/s/gallant-shamir-g3zui

attaching few screenshots on different mobile emulators

enter image description here

enter image description hereenter image description here

Solution

  • you have set your card class attached to the main element to a fixed width in styles.css (width: 327px;). Use percentages for width and height to get a responsive webpage.