hitmorecode• 6,230
@hitmorecode
Posted
Congratulations on your effort, good one. There are a few problems with you page that you can fix. The page is not really responsive, when going to small screen size it breaks. Not only that but the card doesn't stick to the middle of the page on small screen size.
/* make these changes to the body */
body{
overflow: hidden; /* remove this */
background-color: hsl(225, 100%, 94%);
margin-left: 21px; /* remove this */
margin-right: 21px; /* remove this */
margin-top: 35px; /* remove this */
/* add these lines. with these lines the card will be placed in the middle of the page */
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
/* there is no need to style this, you can remove this */
.menu{
background-color: hsl(225, 100%, 98%);
margin-left: 417px;
margin-right: 397px;
padding-bottom: 20px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
box-shadow: 0px 0px 22px rgb(0, 0, 96);
}
.card{
width: ; /* add a value for the width */
height: ; /* add a value for the height */
display: flex;
flex-direction:column;
justify-content: center;
align-items:center;
border-radius: 30px;
}
img{
object-fit: cover;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
/* this is shorter */
border-radius: 30px 30px 0 0;
}
These are the few suggestions that you can do it, but there more thing that you can fix see if you can manage do it. If you need any help let me know. Happy coding
1
