Hi Walko

Could you try adding the following to the Custom CSS field of your templates parameters..

@media only screen and (min-width: 960px) and (max-width: 1080px) {

.wrapper960, #header_items, #header, #logo, .hornavmenu {width:960px !important;}

}

And also add the following to the Custom Head Code field...

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

This should reduce the width of your template when opened on an iPad to match that of the smaller screen device.

Ciarán

Hi Ciarán,

Thanks for the reply.
When i look on a tablet i have the following problems.
The logo don't fits anymore in the header, the images in the mod_j51imagelinkhover don't fits anymore and the text in the module base-2 don't fits anymore.

Hope you have a solution for these problems.

Regards,
Walko

Hi Walko

Also adding the following to your Custom CSS field should help in accommodating your content on the smaller screen size...

@media only screen and (min-width: 960px) and (max-width: 1080px) {

h1.logo a {background-size: 960px auto;}

.j51container, .j51container .mask, .j51container .content {

    width: 279px !important;

}

.base-2 .custom p {font-size: 12px;}

}

Ciarán

Hi Ciarán,

Thanks for your reply.
This looks much better!

Regards
Walko

Hi Ciarán,

Now the template looks almost fine on all devices (pc, tablet, android Phone, iPod, ipad ..)
But there's 1 thing.

In the article http://www.timmerbedrijf-greten.nl/trappen you can see on the pc that there are 3 rows with 6 images.
On my android Phone there are also 3 rows with 6 images.
But the tablet and the ipod gives 5 images each row.

Is it possible to automatic resize the images in a article if you use a tablet, iphone or iPod?

Regards
Walko

Hi Walko

I am not familiar with this extension however you could try adding the following to your Custom CSS. You may need to experiment with the width (100px) to get the desired result...

@media only screen and (min-width: 960px) and (max-width: 1080px) {

.sigProThumb a, .sigProThumb a img {

    width: 100px !important;

}}

Ciarán