Shopify Question posted in
The Shopify help center can be found here.

Align images horizontally on desktop and vertically on mobile – Shopify

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 basically know nothing about coding)

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.

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

    <div>

<img src="xxx.jpg" width="24%">

<img src="yyy.jpg" width="24%">

<img src="zzz.jpg" width="24%">

<img src="ccc.jpg" width="24%">

</div>

After looking for a solution I learned about the float tag and tried the following

    <div>

<img src="xxx.jpg" style="float: left; width: 24%; margin-right: 1%; margin-bottom: 0.5em;">

<img src="yyy.jpg" style="float: left; width: 24%; margin-right: 1%; margin-bottom: 0.5em;">

<img src="zzz.jpg" style="float: left; width: 24%; margin-right: 1%; margin-bottom: 0.5em;">

<img src="ccc.jpg" style="float: left; width: 24%; margin-right: 1%; margin-bottom: 0.5em;">

</div>

But again the same thing happened. It shows the images horizontally on mobile.

Anyone knows a solution to this?

I’m using shopify to host my website if it helps.

Tags:

2

Answers


  1. 0

    it would be better if you wrap your images into li or

    @media only screen and (max-device-width: 768px) {
   img {display:block;width:100% !important}
}
    Login or Signup to reply.
  2. 0

    here ur work is done..run this code on ur browser. here media queries is used for mobile display. u should learn that how to make responsive ur website for ur concerned question. work hard 🙂

    <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
.img {
display:inline;
}
@media screen and (max-width: 480px) and (min-width: 320px) {
    /* For mobile phones: */
* {
    box-sizing: border-box;
}
.img {
display:block;
} }
</style>
</head>
<body>
<div class="img">
<img src="xxx.jpg" width="200px" height="300px">
<img src="yyy.jpg" width="200px" height="300px">   
<img src="zzz.jpg" width="200px" height="300px">    
<img src="ccc.jpg" width="200px" height="300px">   
</div>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search