Grow your CSS skills. Land your dream job.

problem with media query

  • # January 2, 2013 at 10:57 am

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

    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 -_-

    # January 3, 2013 at 10:25 am

    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.

    # January 3, 2013 at 10:36 am

    @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 (http://fitvidsjs.com)

    # January 3, 2013 at 10:48 am

    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.

    # January 3, 2013 at 1:39 pm

    @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%;} 

    and

     #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.

    @chrisburton 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.

    # January 3, 2013 at 2:02 pm

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

    # January 27, 2013 at 6:28 am

    @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! http://www.relifeservizi.com/cma-video.htm

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".