Landscape view problem with smartphone

Bootstrap Studio Help
1

This is my first post here. I've just begun using Bootstrap Studio and I'm basically really impressed with it. Previously, I have used Serif WebPlus which is now discontinued and their programmers refused to allow it to make responsive websites.

So here I am with Bootstrap Studio. I am learning a lot about coding and the extent of making an impressive website with this program. However, I have hit a roadblock with a smartphone problem and after trying for many days, I've decided to come to the forum and pick the minds of the skilled individuals here.

Portrait mode on smartphone

Landscape mode on smartphone

As you can see by the pictures, the entire menu can be seen in the portrait mode of the smartphone and it can be scrolled. In the landscape mode, the items below the Publications cannot be seen and cannot be scrolled down to view. I am using using Fixed To Top on the header and maybe that is the problem, but I want the header to remain visible at all times.

Any ideas how to fix this problem or is this a problem with Bootstrap? I hope that someone can steer me in the right direction. Thanks.

2

Try something like this.

@media (max-width:768px) and (orientation:landscape) {
    .navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse{
        max-height:200px;
    }
}

Saj

3

Thanks Saj. That works perfectly. I adjusted the 200px to 190px which works for my situation.

I wish that I had come to the forum before I spent countless days on trying by trial and error and getting nowhere. When searching online for this problem, there were many with this problem but no good fixes for it. Again many thanks.

4

Your welcome, glad it worked out for you. :)

Saj