title: Resizing images in row on browser size
body: <p>I have three images inline. They are 330px wide with 10px separating them. When displayed on a mobile phone, or any window under 1,010px, the images appear one below the other. I would like them to reduce in size so they stay inline. I have tried to simulate the problem in my jsfiddle by placing a div of 100px around the code. That is not there in the actual code. As you can see, the images are not on one line. There are many examples here of how to do this but none address multiple images, that I can find. Is there a way to do this?  <a href="https://jsfiddle.net/user3052443/mbcvp1bc/" rel="nofollow noreferrer">jsfiddle</a></p>
  
  <pre><code>    &lt;style&gt;
      .imagewrapper img {
        max-width: 90%;
        height: auto;
      }
      .box_row_f { display:inline-block; border:4px solid #5CB65C } 
      .box_row_n { display:inline-block; border:4px solid #5CB65C; margin-left:10px } 
      &lt;/style&gt;
  
      &lt;div style="width:100px"&gt;
        &lt;div class="imagewrapper"&gt;
          &lt;div class="box_row_f"&gt;&lt;img src="someimage.jpg"&gt;&lt;/div&gt;
          &lt;div class="box_row_f"&gt;&lt;img src="someimage.jpg"&gt;&lt;/div&gt;
          &lt;div class="box_row_f"&gt;&lt;img src="someimage.jpg"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>