How do i go about Responsive Device for a mobile phone? code plsss

HTML-CSS
1

Here is my HTML:

<div class="container">
      <div class="left">
        <div class="live">
          <div class="img">
            <img class="strike" src="strike-1-6996058-1723296303145.jpg" alt="img">
          </div>
          <strong><span>Live</span> Lebanese Red Cross</strong>
          <p>
            Reports suggest
          </p>
        </div>
        <div class="live">
          <div class="img">
            <img src="pictures/Prime-Minister-Nare_1695956329096_1695956329319.avif" alt="img">
          </div>
          <strong>India and canada</strong>
          <p>
            Canada
          </p>
        </div>
      </div>

Here iS my CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
     
 .container {
    max-width: 1000px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 1em;
    font-family: Georgia, 'Times New Roman', Times, serif;
    padding: 20px 1px;
  }

 .left,
 .right {
    max-width: 250px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

 .middle {
    max-width: 400px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
      
 .live {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
         
  }

 .live .img {
    width: 100%;
   height: 250px; 
  }

 :is(.left, .right) .live .img {
    height: 150px;
  }

 .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

 .live strong {
    font-size: 16px;
    text-align: left;
  }

 .live strong span {
    color: red;
    font-size: 17px;
  }

 .live p {
    font-size: 12px;
  }

 .same {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }

 .same strong {
    font-size: 14px;
  }

 .dangerous {
    font-family: Georgia, 'Times New Roman', Times, serif;
  }

 .same p {
    font-size: 12px;
  }

 .same small {
    font-size: 11px;       
  }
2

this is not a place where you come to ask for code, but you can ask for help in fixing your code.
What issues does your code have when seen on mobile? what would you like to change? what have you tried and how didn’t it work?

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

3

@Timothy001 I have erred on the side of caution and remove the HTML text content because it was of a political nature. Hope you understand, we have to be a little careful about what is posted on the forum.

You can still ask questions about your code.