How to get a mobile webpage to display the same on all devices

Question

I'll just jump right into this. On my Nexus 4, my webpage displays perfectly. It looks good, as it should.

My webpage is basically a puzzle, with all eight pieces being different images that are meshed together using absolute positioning.

So anyways, on my Nexus 4, it looks pretty great. All the pieces mesh, and that's basically all I want.

When I test it out on a Note 3, or a Samsung S5, I run into a problem where the images are very large in size and no longer mesh together. I don't know what I'm doing wrong here, it's really odd.

I'm using the viewport meta tag, and I've messed around with the scaling and the width and height, to no avail.

Here's the part of my code that positions the images -

 <div>
    <div class="hide" id="one" style="position:absolute;left:20px;top:20px;">
        <img src="1.png"/>
    </div>  
    <div class="hide"  id="two" style="position:absolute;left:117px;top:20px;">
        <img src="6.png"/>
    </div>  
    <div class="hide"  id="three" style="position:absolute;left:21px;top:122px;">
        <img src="4.png"/>
    </div>
    <div class="hide"  id="four" style="position:absolute;left:134px;top:128px;">
        <img src="2.png"/>
    </div>
    <div class="hide"  id="five" style="position:absolute;left:212px;top:128px;">
        <img src="7.png"/>
    </div>
    <div class="hide"  id="six" style="position:absolute;left:20px;top:256px;">
        <img src="8.png"/>
    </div>
    <div class="hide"  id="seven" style="position:absolute;left:226px;top:266px;">
        <img src="5.png"/>
    </div>
    <div class="hide"  id="eight" style="position:absolute;left:18px;top:364px;">
        <img src="3.png"/>
    </div>
  </div>

(It's kind of a mess, but I tried to keep it organized). To clarify some things, this is what I've figured out so far.

• It looks like it's actually following the absolute positions on the other devices, the images are just too big. I found this out by looking at the sides of the images, and it genuinely looks like the ones that I put 20px from the left are actually 20px from the left. This just confused me more.

Any suggestions would be awesome.

Many thanks

Answer 1

Try making your images responsive as i commented in this question. But instead of giving them a value of 100%, try with a less value .

For example, if each row has 3 images, your image's width should be like width: 33%; (if you are using margins or paddings, you should have them in mind when you do your width calculations)