Hey there,

It is actually a general question about responsive css, but the template in question at the moment is located here: hofplatz7.ch

Since I don't have an ipad, it has alluded my attention that the tablet/xtablet responsive layout section in the templates manager seemed to not include css for Apple ipads, especially the slideshow and logowrap area didn't adapt. I have fiddled a little bit with the css and the way I configured the slideshow (some of the titles jumped up rather than down to adjust for extra text, which seemed to take care of the div mess that was happening on just the apple ipad, none of the other tablet sizes seem to be affected and the slideshow is turned off there, which I set it to do in the templates manager. I am still wondering if you guys have some tricks up your sleeves regarding ipad. I know this particular template (New Lifestyle) from last year might have been updated since, to include ipad css, if so it'd be good to know as well.
Appreciate your expertise.
Thanks.

Nya

Hi Nya,

I'm looking on my ipad in landscape and it looks ok

Have you changed it?

Cheers
Paul

ah ok - I see variation

Think you want to target this with media queries so its smaller

#slideshowwrap .allitems a {
font-size: 80%;
}

The bottom extra module form is having issues position wise and the button chopped of

#bottom-extra {
top: 150px !important;
}

so you would need to reduce this a little in a media query or two

Hi Paul
I appreciate you looking at the css I came up with. I can see I missed the #bottom-extra for some of my media queries. I did have a general question also about apple ipad and the responsive css that already comes with the templates though. Is there a reason why ipad seems to be separate from xtablet and tablet in template manager?
So to target apple ipads would this be appropriate media query?
@media only screen and (device-width: 768px) { }
Or is there a more effective one?

I think I just figured out what was happening. I had two different versions of the template running and one I hadn't changed the responsive layout for. Is xtablet or tablet geared toward ipads?
Thanks.

Nya

Hi Nya,

hmm good question - I think tablet depending on the orientation

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)

and if you wanted orientation

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) { /* STYLES */}


@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) { /* STYLES */ }

You could also add a line for retina but not sure if this is relevant

Cheers
Paul