title: Interactive CSS boxes depending on browser/screen size
body: <p>01) I am trying to create a row with two content boxes. The first one will contain an image and the second one text. I am having a problem on how to make it interactive depending on the browser and screen size. </p>
  
  <p>So, I want to have this result and I want it to be responsive/interactive depending on the screen size:</p>
  
  <p><a href="https://i.stack.imgur.com/C14q5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/C14q5.png" alt="enter image description here"></a></p>
  
  <p>It is the reason why I added : <code>&lt;div class="inner"&gt;&lt;/div&gt;</code> trying to control the max dimensions but it did not work. </p>
  
  <p><strong>HTML</strong>:</p>
  
  <pre><code>    &lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="rich_text.css"&gt;
  &lt;/head&gt;
  
  &lt;div class="inner"&gt;
      &lt;div class="feature left"&gt;
          &lt;span class="image"&gt;&lt;img src="http://SITE.co.uk/images/bg3.png" alt="" /&gt;
  
          &lt;/span&gt;
          &lt;div class="content"&gt;
              &lt;h2&gt;Total Facebook Image Likes&lt;/h2&gt;
              &lt;p&gt;65 &lt;/p&gt;
              &lt;ul class="actions"&gt;
                  &lt;li&gt;&lt;a class="button alt" href="#"&gt;LINK&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong>:
  <a href="http://SITE.co.uk/rich_text.css" rel="nofollow noreferrer">CSS LINK</a></p>
  
  <p>02) I also noticed that my final results gets spoiled if the image size is too big. </p>
  
  <p>I tried adding that : </p>
  
  <pre><code>&lt;span class="image"&gt;&lt;img style="height:400px;max-width:400px; src="http://SITE.co.uk/images/bg3.png" alt="" /&gt;
  </code></pre>
  
  <p>But the image does not load. </p>