Mobile problem: Slide and text break out

This snippet explains your problem. Come back if you can’t get it to work.

I have added this code but it didn’t work ??

I tried to solve this problem but now when it’s on mobile or zoom in smaller scale, the text on slider will disappear.

Also, my menu total disappear on mobile, there is only the button, when I touch it, there is nothing on the menu.

Please help me with these two issues. Thanks a lot!

Slider Text:

I use Resizer to test different viewports.

So if I look at your site in iPad Landscape (1024×768), then I can just about see the text at the bottom. This shows that you need to reposition the text block in different viewports using @media.

I can see

.carousel-caption h1 {
  margin-top: -50px;
}

in your style. I’d recommend you code repositioning. To reposition items, you need to start with:

.selector {
position: relative;
top: 0px;
left: 0%;
}

and then make adjustments. Use ‘-‘ to move up or left from start-position so
top: -1px moves up, 1px moves down
left: -1% moves left, 1% moves right

For width dimensions, using % ensures your responsiveness is maintained.

Menu:

.navbar .nav > li > a {
  position: relative;
  top: -80px;
}

on line #41 is moving the items out of the box.

It still doesn’t work for the menu ?? on my iphone, the menu doesn’t show when I push the menu-button. What should I do?

Did you take out the code I showed you on line #41? Or adjusted the -80px?

If I remove that, the menu will go down onto slider, I adjust the -80px to -95px only.

Just start adding something like this:

.nav-collapse .nav > li > a {
position: initial;
top: 0;
}

Work perfectly! Tks a lot!