Image is not visible completely when responsive below 700[x

Question

There is a container named article two child div one having an image as background and other has text in it. I had make a breakpoint at max width:700 px to change it into coulmn and change the width of the image (having class article-preview) to 100 % flex to none. but as I am resizing the image is growing and shrinking although the width is 100 % but at some point half image is visible not showing complete length.

 <div class="container">
        <div class="article">
          <div class="article-preview"></div>
          <div class="article-info">
            <h1>
              Have the courage to follow your heart and intuition. 
            </h1>
            <p>
              Steve Jobs was is one of the most respected entrepreneurs and inventors of his time. In 1976 he founded Apple together with his friend Steve Wozniak. They created their first computer, the Apple I, in the garage of Jobs’ parents. 
            </p>
            <div class="article-author">
             <i class="fa fa-apple" aria-hidden="true"></i>
              <div class="author-info">
                <span class="author-name">Steven Paul Jobs</span>
                <span class="date">28 Jun 2020</span>
              </div>
           
            </div>
            
          </div>
        </div>
      </div>

.article {
        height: 280px;
        max-width: 700px;
        display: flex;
        flex-direction: row;
}

    /* Article Preview Section */

    .article-preview {
        height: 280px;
        width: 290px;
        width: 100%;
        background: url('https://images.unsplash.com/photo-1591843336309-cbf414ad7978?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1567&q=80g');
        background-size: cover;
        background-position: top center;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        flex: 1;
    }

    /* Article Info Section */

    .article-info {
        flex: 1.19;
        background: #ffff;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        padding-left: 40px;
        padding-right: 35px;
        padding-top: 25px;
        padding-bottom: 30px;
        position: relative;
    }

    .article-info h1 {
        font-size: 20px;
        line-height: 1.5;
        margin-bottom: 15px;
    }

    .article-info p {
        font-size: 12px;
        line-height: 1.5;
        margin-bottom: 20px;
        padding-right: 8px;
    }
@media  (max-width: 700px) {
    .article{
       
        height: auto;
        display: flex;
        flex-direction: column;
       
    }
    .article-preview{
        width: 100%;
        flex: none;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 0px;
        height: 280px;
    }
    
}

Answer 1

By the code you have provided, what I understood is. When your screen size is below 700 px, the flex should be in column direction in a way the image will be on top, but currently the image size is getting reduced when you reduce the screen size. As a suggestion/solution, what you can give is

background-size: contain;
background-repeat: no-repeat;

to the article-preview when your screen size is below 700px, so the background-image will be having a fixed width, it will shrink/grow as the window size changes, but it won't break halfway. So I think this will be a good solution. Otherwise, you can give

background-position: center;

to the article-preview in the media query. Again, the image will shrink/grow. But the image will always be on the center and it will keep 100% width to the parent too.

Other than these 2 methods, you can give 100% width and 100% height to the image, but then the image will be disoriented.

enter code here

.article {
        height: 280px;
        max-width: 700px;
        display: flex;
        flex-direction: row;
}

    /* Article Preview Section */

    .article-preview {
        height: 280px;
        width: 290px;
        width: 100%;
        background: url('https://images.unsplash.com/photo-1591843336309-cbf414ad7978?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1567&q=80g');
        background-size: cover;
        background-position: top center;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        flex: 1;
    }

    /* Article Info Section */

    .article-info {
        flex: 1.19;
        background: #ffff;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        padding-left: 40px;
        padding-right: 35px;
        padding-top: 25px;
        padding-bottom: 30px;
        position: relative;
    }

    .article-info h1 {
        font-size: 20px;
        line-height: 1.5;
        margin-bottom: 15px;
    }

    .article-info p {
        font-size: 12px;
        line-height: 1.5;
        margin-bottom: 20px;
        padding-right: 8px;
    }
@media  (max-width: 700px) {
    .article{
        height: auto;
        display: flex;
        flex-direction: column;
    }
    .article-preview{
        width: 100%;
        flex: none;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 0px;
        height: 280px;
        background-size: contain;
        background-repeat: no-repeat;
    }
}

 <div class="container">
        <div class="article">
          <div class="article-preview"></div>
          <div class="article-info">
            <h1>
              Have the courage to follow your heart and intuition. 
            </h1>
            <p>
              Steve Jobs was is one of the most respected entrepreneurs and inventors of his time. In 1976 he founded Apple together with his friend Steve Wozniak. They created their first computer, the Apple I, in the garage of Jobs’ parents. 
            </p>
            <div class="article-author">
             <i class="fa fa-apple" aria-hidden="true"></i>
              <div class="author-info">
                <span class="author-name">Steven Paul Jobs</span>
                <span class="date">28 Jun 2020</span>
              </div>
           
            </div>
            
          </div>
        </div>
      </div>