1

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 all the site rescale proportionally so it can be seen on ipads at least.

The problem is all the design is html based, so you can have in on line 1 to 3 images of different sizes, without any use of css. All design is html based.

Changing each image/table one by one would be few weeks of boring work as this site has many pages (hundreds, about animals/plants)

I have seen most topic describing this css solution: img {width: 100%; height: auto;width: auto\9; /* ie8 */}

However this does not work in this case because there is various numbers of images beside each others.

Is there an easy way to resize all the site proportionnally?

CSS, or Javascript, or Jquery ?

Many thanks

user4727441
  • 13
  • 3
  • Sad she didn't build that page in PHP from the beginning – Roko C. Buljan Mar 29 '15 at 21:13
  • IF the relevant content in all those hundreds of pages is inside let's say an DIV `#content` you can scrape all those pages and create separate articles pages named from the value of the `h1` tag (i.e.) relatively easy with a PHP script. Than all you need is to rebuild one responsive article page and depending on the clicked link bring into it the related article content. – Roko C. Buljan Mar 29 '15 at 21:16
  • so there is no "magic line" or easy way: css or something else, to do the job? – user4727441 Mar 31 '15 at 07:28
  • Why is it "on hold" can people still answer me ? Maybe some people have a solution no ? – user4727441 Mar 31 '15 at 07:31
  • No, there's no way to get any more answers on this one. – Roko C. Buljan Mar 31 '15 at 14:14

2 Answers2

0

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 }
}
frunkad
  • 2,433
  • 1
  • 23
  • 35
0

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

Andre Sharghi
  • 111
  • 1
  • 7