No replies
unprocione
unprocione's picture
Offline
newbie
Last seen: 8 years 24 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
http://www.noisefuel.net/prova/index.htm Sample page with photo
http://www.noisefuel.net/prova/after.htm 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