htmlcss

Flexbox container not shrinking in responsive design

Fullscreen

Shrunk/responsive

I have a flexbox containing an h1, h4, and img. The HTML is designed to work responsively, but when I shrink the page, the flexbox goes off screen and allows for a scroll option instead of placing the img under the h1 and h4. How do I fix this? (h1/h4/img in class .fronttest, h1/h4 in class .front, img in class .front-img). I've also deleted the float line that's in the image

.front-img {    margin-left: 7%;    margin-top: 2%; }  
.fronttest {    /*position: absolute;*/     display: flex;  margin: 0 auto;     top: 25%;   left: 9%;   width: 80%;     height: 50%; }  
.front, .front-img {    flex: 1; }
Solution

  • You can add @media for mobile responsiveness if the screen from 800px or below.

    .fronttest {
   display: flex;
    flex-direction: row;
}

@media (max-width: 800px) {
  .fronttest {
    
    flex-direction: column;
  }
}