The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS problem with media query

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #41717

    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%. : 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 -_-


    One thing I might suggest is not using position absolute unless there is a specific need for using it. So on your elements like #content and #content img position absolute should be removed; they should stay in the page flow. They may clear up some of the issues.

    Later on today I’ll take a more in depth look, but as I’m on clock at the moment that’s all I can do to help for now.


    @unprocione @TheDark12 is correct.

    On #content, remove

    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;

    On #content img, add

    width: 100%;
    height: auto !important;

    However, you might want to use full page backgrounds for this.

    For the video, check out FitVids.js (

    Andy Howells

    Yeah I’m not getting why you’re using absolute, or really any positioning.

    The only time I use relative/absolute positioning is for visual tweaks, like :before/:after or icons for example. In responsive design learn to use floats & margins as well as padding to achieve the spacing and layouts you want.


    @andy I use absolute to have the content centered, otherwise it doesn’t center :( i’ve read that if you want a content to fit and to have a precise position from top and bottom you have to use absolute. i’m a selftaught and i am a photographer in life, not a programmer, that’s why i take for true things i read around the web and things resulting good from my experience. i know i’m not 100% pro :D sorry. i would like to read some good book about responsive design, could you suggest one? i’ve just finished a css3 guide by p. gasston.

    anyway i changed and changed things but actually i changed few, removing some details in media queries, leaving only

     #content img {height: 100%;} and writing #content {position: absolute; display:block; margin: 0 auto; bottom: 0; top: 0; width: 100%; height: 100%;} 


     #content img {display: block; margin: 0 auto;} 

    . for video i wrote width and height inline in < i f r a m e > and then styled in media queries again and i really don’t know why but it worked O___O
    Anyway yesterday i was going crazy trying everything obscurely and desperately… so i don’t know why but now it’s working, also the images. ._. on all devices.

    THANKS!!! I don’t know js and I’m reading a S. Suehring’s book about it but for now I’m not able to program it of course… I always try to make only css websites but this can be useful for example for my personal website.


    @unprocione Well, we can help you with FitVids.js if you’d like.


    @chrisburton , now i’m starting using fitvids! but i have one problem: background is green like it was in the tests.html and i really don’t know what to change!

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.