Grow your CSS skills. Land your dream job.

CSS Landscape mode

  • # November 25, 2012 at 6:49 am

    Hi,

    I’m currently creating my website called [http://www.boeddo.com](http://www.boeddo.com “Boeddo”).
    But I have one problem, when I go to the website on my iPhone everything works fine, but when I turn it to landscape mode, some text goes away. Here is the picture: [pic.png](http://www.boeddo.com/pic.png “Landscape mode”).

    This is the CSS:

    #welcome_holder {
    width: 100%;
    position: fixed;
    top: 110px;
    background: none;
    }

    #welcome {
    width: 960px;
    margin: auto;
    font-family: Helvetica;
    font-weight: bold;
    background: none;
    position: relative;
    top: 140px;
    margin-left: auto;
    margin-right: auto;
    }

    .text-border {
    display:inline-block;
    background: rgba(136, 136, 136, 0.3);
    padding:12px;
    margin:4px 10px;
    color:#fff;
    font-size: 36px;
    }

    .no-rgba .text-border {
    background-color:#888;
    }

    and this is the HTML:

    Hi there!
    Welcome on my site
    My name is Quincy Kools
    I’m an interactive developer
    Have fun :-)

    Could anybody help me, please?
    I would like that the text is visible on my iPhone.

    Thanks, Boeddo

    (Sorry when I speak bad English, I’m a Dutch man)

    # November 25, 2012 at 8:59 am

    Does it become visible if you scroll up?

    However, it sounds like you aren’t using media queries.

    # November 25, 2012 at 10:52 am

    No, I can’t scroll. I used the Sticky Footer from CSS-Tricks [(link)](http://css-tricks.com/snippets/css/sticky-footer/ “Sticky Footer”).

    That’s right, I don’t use media queries.

    # November 25, 2012 at 12:04 pm

    >**That’s right, I don’t use media queries.**

    Then there is your answer.

    It can’t scroll, I assume, because for some reason you have used fixed positioning on your#welcome-holder.

    I assume you have this in the head

    # November 25, 2012 at 2:48 pm

    I already tried that, but it doesn’t work. Do you have an iPhone or iPod?
    Maybe you can see it by yourself?

    Thanks for anwsering.
    Do you have any other ideas? You can see the hole code on [Boeddo.com](http://www.boeddo.com “Boeddo”).

    I also deleted the position fixed and the clearfix position, but it still doesn’t work.

    # November 25, 2012 at 5:59 pm

    It is not just an iphone issue. Make your browser shorter and you have the same issue. Since the text and container are either position fixed or relative with top margin pushing it down out of view.

    # November 26, 2012 at 1:43 pm

    > It is not just an iphone issue. Make your browser shorter and you have the same issue. Since the text and container are either position fixed or relative with top margin pushing it down out of view.

    Thank you. It didn’t worked great and my footer was far away on the site. But I played with the CSS and put a spacer and a bottom. Now everything works great.

    Thank you Steven and Paulie! :)

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