HTML: Stop pictures from overlap on mobile view (responsive design) - html

Question

I've got a website, based on wordpress and the responsive design "Mystile".
I use the following html code to display three pictures side by side:
<div style="position: absolute;"><img src="myimgsrc" alt="" /></div>
<div style="position: absolute; margin-left: 250px;"><img src="myimgsrc" alt="" /></div>
<div style="position: absolute; margin-left: 500px;"><img src="myimgsrc" alt="" /></div>
This works flawlessly on the computer.
As you can see on the picture.
But on a mobile device it looks terrible.
Like this:
What can should I do?
Thank you very much.

Answer 1

The easiest is just to display the images inline. They will then wrap under each other if there isn't enough space to fit beside one another:
html, body {margin:0;}
.hmm a {display:inline-block; margin:10px 0 0 10px;}
.hmm a img {display:block; margin:0;}
<div class="hmm"><img src="http://www.placehold.it/240x50" alt="placeholder" /><img src="http://www.placehold.it/240x50" alt="placeholder" /><img src="http://www.placehold.it/240x50" alt="placeholder" /></div>
If you want to get a little more advanced you can use media-queries to change the style for different sized viewports:
html, body {margin:0;}
.hmm a {display:inline-block; margin:10px 0 0 10px;}
.hmm a img {display:block; margin:0;}
#media all and (max-width: 750px) {
.hmm a:first-of-type img {width:490px;}
}
#media all and (max-width: 510px) {
.hmm a {
display: block;
margin:10px;
}
.hmm a img {
width:100%!important;
}
}
<div class="hmm"><img src="http://www.placehold.it/240x50" alt="placeholder" /><img src="http://www.placehold.it/240x50" alt="placeholder" /><img src="http://www.placehold.it/240x50" alt="placeholder" /></div>
^ Go 'full-page' and resize to see this one working.