How To Make Website (images/ Tables) Resize Proportionnally To Fit Screen Size

My friend has a html website with many pages containing various text or pictures. She received a google warning that the site can't be seen on ipads/smartphones and would like that

Solution 1:

This is one way to resize side by side content to fit the screen:

HTML:

<div class="container">
    <div class="container-cell">
        <img src='http://tinyurl.com/pmaa4h2' />
    </div> 
    <div class="container-cell">
        <img src='http://tinyurl.com/pmaa4h2' />
    </div>
    <div class="container-cell">
        <img src='http://tinyurl.com/pmaa4h2' />
    </div> 
    <div class="container-cell">
        <img src='http://tinyurl.com/pmaa4h2' />
    </div> 
</div>

CSS:

.container-cell img { 
   width:100%;
}

.container-cell {
   display: table-cell;
   width: auto;
}

JSFiddle Example

EDIT:

With same css as above, but html like this:

HTML:

<img src='http://tinyurl.com/pmaa4h2' />
<img src='http://tinyurl.com/pmaa4h2' />
<img src='http://tinyurl.com/pmaa4h2' />

You can add container-cell div with javascript. But please use a better selector if you don't want to add container-cell on all img tags.

Javascript:

$("img").wrap("<div class='container-cell'></div>");

JSFiddle Example 2

Solution 2:

I would recommend using Bootstrap , but you said you have already started.

One thing you can do is css min-width trick

You can set like this

img { height : 100px }
media(min-width: 786px){
    img { height : 100px }
}