title: Align images horizontally on desktop and vertically on mobile
body: <p>I have 4 images on my website that I want  to display horizontally on desktop and vertically on mobile. (I just started learning HTML so I <strong>basically know nothing about coding</strong>)</p>
  
  <p>The only thing I could think of was to find a way to set that a number of images will align themselves next to each other as long as there's room for them. </p>
  
  <p>So I've set the width of each image to 24%. It worked perfectly on desktop but then of course on mobile they were also horizontal as on desktop</p>
  
  <pre><code>    &lt;div&gt;
  
  &lt;img src="xxx.jpg" width="24%"&gt;
  
  &lt;img src="yyy.jpg" width="24%"&gt;
  
  &lt;img src="zzz.jpg" width="24%"&gt;
  
  &lt;img src="ccc.jpg" width="24%"&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>After looking for a solution I learned about the float tag and tried the following</p>
  
  <pre><code>    &lt;div&gt;
  
  &lt;img src="xxx.jpg" style="float: left; width: 24%; margin-right: 1%; margin-bottom: 0.5em;"&gt;
  
  &lt;img src="yyy.jpg" style="float: left; width: 24%; margin-right: 1%; margin-bottom: 0.5em;"&gt;
  
  &lt;img src="zzz.jpg" style="float: left; width: 24%; margin-right: 1%; margin-bottom: 0.5em;"&gt;
  
  &lt;img src="ccc.jpg" style="float: left; width: 24%; margin-right: 1%; margin-bottom: 0.5em;"&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>But again the same thing happened. It shows the images horizontally on mobile.</p>
  
  <p>Anyone knows a solution to this? </p>
  
  <p>I'm using shopify to host my website if it helps.</p>