No replies
unprocione's picture
Last seen: 10 years 5 weeks ago
Timezone: GMT+1
Joined: 2012-03-16
Posts: 2
Points: 4

Hi all!

I've just written my first css with media queries. I validated it and it's ok, on a laptop or normal screen you can see it without any problem. The layout is designed to be elastic, with photos taking height: 100% and width: auto and videos taking height: 100% and width: 100%. :

These links NSFW Sample page with photo Sample page with video

The problem is that Ipad shows both pages badly. The page with the photo hasn't the div centered, also if #content is set to {display: block; position: absolute; margin: 0 auto;} ) but it's on the left while on the right you can find a black space that is the background ( body {background: #000;} ).
The page with video really doesn't make any sense. The video appears really small in the top-left corner of the page, also if it is wrapped in #video, set to { display: block; position: absolute; margin: 0 auto; padding: 0; bottom: 0; }

Galaxy Tab 7 moreover has big problems with the photo, because setting #content img with min-width oe width : 1024px (its native resolution) an horizontal scrollbar appears. If I set width: 100% obviously a vertical scrollbar appears while the photo correctly fixes the whole page. The problem is that if I set height: 100%; e width: auto; the photo shows exactly like if it was set to width: 100%.
The page with video displays well instead.

Any idea? I've tried so many things -_-

//mod edit: NSFW warning added. ~gt