One page + parrallax + bootstrap

[ingenting]

Trying to build a one-page site with twitter bootstrap.

Link to live site is here

I have some questions regarding some problems.

1. My navigation is going out of the container. Why is that ? (See picture http://i45.tinypic.com/rr2mbm.png)

2. The navigation is going underneath this content, i have tried to use some z-index. But cant make it work. http://i49.tinypic.com/ru46iu.png

3. In chrome my parrallax effect is not working. Any idear why ?

4. I somehow get some margin/padding on the right side. Which is not so clearly on desktop, but on ipad it is seen clearly http://i50.tinypic.com/v7cn6h.png.

[Paul O'B]

Trying to build a one-page site with twitter bootstrap.

Link to live site is here

I have some questions regarding some problems.

1. My navigation is going out of the container. Why is that ? (See picture http://i45.tinypic.com/rr2mbm.png)

The navigation is place with position:fixed and therefore cares nothing about your container as all fixed elements are relative to the viewport. You'd need to drag the nav to the left with a negative left margin if you want it inside that container.

2. The navigation is going underneath this content, i have tried to use some z-index. But cant make it work. http://i49.tinypic.com/ru46iu.png

Works form me:

.affix {
    position: fixed;
    z-index: 99;
}

4. I somehow get some margin/padding on the right side. Which is not so clearly on desktop, but on ipad it is seen clearly http://i50.tinypic.com/v7cn6h.png.

[/quote]

That's likely to be the fixed nav poking out the side of the viewport and thus the main layout gets shrunk to fit thus revealing a gap at the side. Fix the nav first and see if the problem persists. If there is a still a gap then check if you have any elements as 100% wide and then ensure they have a min-width to match the min -wdith of the layout.

[ingenting]

Thanks Paul for helping me out.
Nr.1 I used your advice with negative margin and it is now as i wanted.
Nr.2 is fixed with your z-index.
Nr.4. I do not see any problem now on desktop. On Ipad there is still the extra 10px (sometimes my ipad cant clear the cache so maybe that is the problem now. Could someone take a look on there Ipad and see if there still is a problem.)

Do you know why this parrallax effect is not working in chrome ?

[Paul O'B]

Do you know why this parrallax effect is not working in chrome ?

I'm not sure what parallax effect you mean? All I see that resembles the parallax effect is those blue dots sliding up and down but they look the same on Chrome as well as firefox to me so I guess you must mean something else.

[ingenting]

I'm not sure what parallax effect you mean? All I see that resembles the parallax effect is those blue dots sliding up and down but they look the same on Chrome as well as firefox to me so I guess you must mean something else.

I just tested it on another pc an here it works fine. It does work on my pc but it takes like 1 min to load.

[ingenting]

The last problem i have is the four boxes. The do not look good on ipad/mobile. http://i47.tinypic.com/5yun8w.png. Howcome they look like this ?

I am thinking that if possible i could disable the ipad version an only have a mobile version. What should i delete then ?

[Paul O'B]

Hi,

If you mean that they are left aligned then you could center them by adjusting the code.

e.g.

.row {
    display: table;
    margin: auto;
}

Don't think in issues of device sizes as my monitor looks like your png with the 4 boxes squashed to the left because I always have my browser half open so I can work on other stuff. You need to think about making it work make it work for all resolutions and not just device sizes.

[ingenting]

I have tried it, does not seem to solve the right-margin. Where the f.. is it coming from Maybe not the biggest problem but nice to know.

Do you have any answer to this: "The last problem i have is the four boxes. The do not look good on ipad/mobile. http://i47.tinypic.com/5yun8w.png. Howcome they look like this ?

If i resize the browser they looks great, it is only on ipad.

I am thinking if possible i could disable the ipad version an only have a mobile version. What should i delete then ? "

[Paul O'B]

I have tried it, does not seem to solve the right-margin. Where the f.. is it coming from Maybe not the biggest problem but nice to know.

Do you have any answer to this: "The last problem i have is the four boxes. The do not look good on ipad/mobile. http://i47.tinypic.com/5yun8w.png. Howcome they look like this ?

Hi,

Thats what they look like on my normal browser anyway? Screenshot below.

four-in-a-row.png

In the second example I removed the 20px negative margin from .row and the boxes aligned to the center.