SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    One page + parrallax + bootstrap

    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.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ingenting View Post
    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:
    Code:
    .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.

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 ?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ingenting View Post

    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.

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.

  6. #6
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 ?

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

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

    e.g.
    Code:
    .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.

  8. #8
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 ? "

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ingenting View Post
    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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •