shewall• 90
@shewall
Submitted
Sufiyan Ahmed
@sufiyan0
All comments
- Sufiyan Ahmed• 160
@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. :)
0 - Apah• 280
@apah-dev
Submitted
Made the following changes to better my code and make it more responsive.
-
Used a flex box for the body to align all elements to the center without having to mess with the width and height.
-
Used a flex box for the main container div to align elements in columns and center too.
-
Used the recommended fonts and colors in the style guide
Sufiyan Ahmed• 160@sufiyan0
Posted
In Your project folder you always find style-guide file try to read in and follow the color and font style.
body{ display: flex; align-items: center; justify-content: center; min-height: 100vh; } use this code to get your component in center of the screen
Marked as helpful
0 -
