What are you most proud of, and what would you do differently next time?
Be able to use flex box styling.
What specific areas of your project would you like help with?
I dont know how to adjust the card and item width as the screen size change.
@ShoaibShuja
Posted
Amazing job my friend but the page doesn't seem to be responsive in smaller devices, you can fix this by using @media screen and (max-width: 650px) which implements a design of your own choice on smaller devices. These lines of code will aid your page:
@media screen and (max-width: 650px) { .card { min-width: 85%; min-height: 80vh; } }
Have a beautiful day.
@EFEELE
Posted
To do that you have to implement media queries in CSS.
an example:
/* Styles normal */
.my-div{
width: 800px;
height: 500px;
background-color: red;
}
/* Styles on devices with a max-width 768px */
@media screen and (max-width: 768px){
.my-div{
width: 400px;
height: 250px;
background-color: green;
}
}
Test on codepen : https://codepen.io/efeeledev/pen/MWdOPoV
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord
