@ecemgo
Posted
Some recommendations regarding your code that could be of interest to you.
If you want that this solution is responsive, I suggest some techniques without using media query for this solution. Also, I recommend avoiding repetition in your code and not using styles that don't work.
- If you want to make the card centered both horizontally and vertically, you'd better add flexbox and
min-height: 100vh
to thebody
body {
/* overflow: hidden; */
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
- When you use flexbox in the
body
, you don't need to use flexbox in the.main-con
to center the card - If you use
max-width
, the card will be responsive
.main-con {
background-color: hsl(0, 0%, 100%);
/* height: 45%; */
/* width: 15.7%; */
max-width: 300px;
padding: 15px;
/* display: flex; */
/* flex-direction: column; */
/* justify-content: center; */
/* align-items: center; */
border-radius: 1rem;
}
- If you give height to text, it prevents the card will be responsive
- You can update font-size and padding in this way
- You can give
margin-bottom
to the.main-con .para
to give a gap between the text and the bottom of the card
.main-con .main-text {
/* height: 17.5%; */
/* font-size: 17px; */
font-size: 20px;
/* padding: 0 0px; */
padding: 0 10px;
}
.main-con .para {
/* height: 17.5%; */
/* width: 100%; */
/* font-size: 13px; */
font-size: 16px;
margin-bottom: 20px;
padding: 0 10px;
}
- Finally, if you follow the steps above, the solution will be responsive
- You'd better remove media queries and the styles below to avoid repetition
/* .container {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
} */
/* .main-con .img {
height: 65%;
width: 100%;
border-radius: 1rem;
} */
/* .main-con .para p {
font-size: 13px;
} */
Hope I am helpful. :)