HTML/CSS Make image resize on smaller screens
<p>I'm trying to build a very basic site with an image centered in the middle of the page with three lines of text below it, also centered.</p>

<p>I have it how I want it to look on a larger screen, but when viewed on a smaller screen (iPhone) the image is too large. I need to have the image resize based on the screen resolution.</p>

<p>I've done some Google'ing and know this is possible, but have not been able to get it to work. HTML/CSS is not my strong suite. Any help would be much appreciated. Here is my code:</p>

<pre><code>&lt;html&gt;
&lt;style&gt;
body {
font-family: 'Helvetica', 'Arial', sans-serif;  
    background: white }
section {
background: white;
    color: black;
    border-radius: 1em;
    padding: 1em;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) }  
&lt;/style&gt;
&lt;section&gt;
&lt;IMG src="Logo.png" alt="Logo"&gt;
&lt;br&gt;&lt;br&gt;
&lt;h1&gt;&lt;center&gt;&lt;p&gt;&lt;a href="mailto:Email@domain.com" style="color: #D08242" target="_top"&gt;Email&lt;/a&gt;
&lt;p&gt;&lt;font color=B5B5B5&gt;Phone Number
&lt;font size=7&gt; &lt;p&gt;&lt;i&gt;Tagline&lt;/i&gt;&lt;/center&gt;&lt;/font&gt;
&lt;/section&gt;      
&lt;/html&gt;
</code></pre>