I am facing an issue with my responsive design using flexbox. On mobile, my 3 boxes containing products named Ragnar, Thor, and Odin look great. However, when I switch to tablet or desktop view, the boxes suddenly grow larger due to the media query set with a max-width in pixels. I need help making them more responsive.
In summary, I want the boxes to smoothly scale and adjust their width until they reach their maximum size while remaining narrower than other elements on the page.
You can view the pen here: https://codepen.io/aitormorgado/pen/MWayXPy
Below is the code for the section ID and box class:
#models-section {
flex-direction: column;
align-items: center;
text-align: center;
font-size: 5.5rem;
}
.product {
margin: 3rem auto;
border: 1.5px solid black;
line-height: 1.8;
max-width: 260px;
}
Here's the media query used:
@media only screen and (min-width: 768px) {
html,
body {
max-width: 70vw;
margin: 0 auto;
}
.product {
max-width: 400px;
font-size: 3.5rem;
}
}