Responsive Design for Mobiles

Question

I am new to HTML5 and I have created a website with home page having few icons with absolute position, fixed top and left values.

But when the same is opened in mobile device, I have to scroll a lot, and the images are not coming in center as expected.

Please let me know your inputs for same, as I am new to HTML5 and would like to learn different aspect.

Thanks & Regards, Mrudul

Answer 1

I'm going to take a wild guess and say you're using bootstrap to make things responsive. If thats the case, you can simple add a class to images to make them scale correctly..

<img src="http://placehold.it/1920x400"  class="img-responsive"  alt="">

You can copy and paste this in your editor to test it. This way, if the screen gets smaller, so will your image.

EDIT :
Also, if you want the image to be contained in a wrapper you can use the following structure :

<div class="container">
    <div class="row">
        <div class="col-md-12">
                <img src="http://placehold.it/1920x400"  class="img-responsive"  alt="">
        </div>
    </div>
</div>