How to make images appear in a list on mobile screens?
<p>I have my images in a tables but they show up really squished together or really far apart on mobile screens, is there any coding to get them to be in a vertical line?</p>

<pre><code>&lt;body&gt;
&lt;div class="product"&gt;
&lt;center&gt;&lt;table id="table2"&gt;
&lt;tr&gt;
    &lt;td&gt;&lt;img src="lipgloss1.png" height="300" width="200"&gt;&lt;/td&gt;
    &lt;td&gt;&lt;img src="lipgloss2.png" height="300" width="200"&gt;&lt;/td&gt;
    &lt;td&gt;&lt;img src="lipgloss3.png" height="300" width="200"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
    &lt;td&gt;&lt;p&gt;Peridot Green - $3.99&lt;/p&gt;&lt;/td&gt;
    &lt;td&gt;&lt;p&gt;Pearl White - $3.99&lt;/p&gt;&lt;/td&gt;
    &lt;td&gt;&lt;p&gt;Amethyst Purple - $3.99&lt;/p&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;
</code></pre>

<p>here's the CSS </p>

<pre><code>.product {
background-color: white;
margin-left: 3em;
margin-right: 3em;
padding: 2em;
}

@media screen and (min-width: 480px) {
body img {
    width: 100%;
 }
} 
</code></pre>