Ad

Align Images Horizontally On Desktop And Vertically On Mobile

- 1 answer

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.

Ad

Answer

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>
Ad
source: stackoverflow.com
Ad