@sufiyan0
Posted
Some recommendations regarding your code that could be of interest to you.
If you want that this solution is responsive, you can follow these suggestions below:
In order to center the card vertically and horizontally, you'd better add flexbox and min-height: 100vh to the body For the color of the screen, you can use the recommended color in the body body { /* background-color: hsl(218, 19%, 80%); / background-color: hsl(212, 45%, 89%); display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } If you use flexbox in the body, you don't need to use margin in the main to center the card If you use max-width instead of width and height, the card will be responsive and you'd better reduce the width a little bit if you want You'd better give padding to give a gap between the content and the border of the card main { / width: 350px; / / height: 550px; / / margin: 100px auto 100px auto; / / font-size: 11px; / max-width: 280px; padding: 20px; } In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% and display: block for the img in this way: img { / height: 300px; / / margin-top: 20px; / / margin-left: auto; / / margin-right: auto; / border-radius: 5%; display: block; width: 100%; } You'd better update margin and font-size of texts in this way h1 { / margin: 25px 30px auto 28px; / margin: 25px 0; font-size: 20px; } p { / margin: 20px 30px auto 28px; */ margin: 0 0 25px; } Hope I am helpful. :)
