CSS Landscape mode

[Boeddo]

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)

[Paulie_D]

Does it become visible if you scroll up?

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

[Boeddo]

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

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

[Paulie_D]

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

[Boeddo]

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.

[Boeddo]

> 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! :)

[Author]

Posts