@media only screen and (max-width: 600px) {
/* styling for screens smaller than 600px */
#recommendation-box {
width: 90%; /* reduce the width of the recommendation box */
margin: 0 auto; /* center the recommendation box */
}
/* reduce the font size for smaller screens */
h1, #rating, #synopsis {
font-size: 1.2em;
}
}
@media only screen and (max-width: 400px) {
/* further styling for screens smaller than 400px */
#recommendation-box {
width: 95%; /* reduce the width of the recommendation box even more */
}
/* reduce the font size for even smaller screens */
h1, #rating, #synopsis {
font-size: 1em;
}
}