mobile and tablet version responisive issues

[Joe]

I have 3 issues, all related to the mobile and tablet version of the application:

1. I have placed this: @media only screen and (min-width: 150px) and (max-width: 1024px) in the web2py.css file and my app was perfectly responsive offline as I was developing. When I made my browser smaller, it was fully responsive, it worked exactly the way I wanted. I use the max-width:1024px because this works for the horizontal view on tablets as well. However, when I tested my application online on an actual tablet, it works fine for the vertical view but its not really responsive for the horizontal view. The horizontal view should look like the vertical with the max-width:1024px but it doesn't. The horizontal view on the tablet is not really responsive although some elements are responding to my @media but some are not.

2. The mobile nav bar is not working properly. When I tap the mobile nav bar instead of a droppdown menu I get a text box with a text: "Home". When I tap this text I get the menu in the bottom of the page and I can tap to go to an other page, however, the nav bar is stuck on the page "Home" so I can not go back to the Home page because the nav bar "thinks" I am on the Home page when I am actually on the About page. So from the About page I can not go to the Home page because the nav bar is stuck on the Home but I can go to the Contact page. When I am on the Contact page the nav bar is stuck on the About page. In other words, the nav bar is stuck on the last page I visited and when I leave that page, in the nav bar, is still see the previous page as if I was still on that page so I can not navigate back to that pack.

3. The video player controls are not showing up on the player as they should, I can't really recognize any of the controls although there are some stuff there but doesn't look anything like the controls. If I tap on the middle of the screen, the video plays.

The application works flawlessly on the desktop none of the above problems exist on the desktop and as I mentioned, on the desktop it is responsive when I shrink the browser screen.

I looked at the bootstrap.min.css and the bootstrap-responsive.min.css but I can't figure out what to do.

I am very happy with my app on the desktop and I am very happy with web2py, I think web2py is amazing. Obviously, I am just a beginner, I still have a lot to learn. I would appreciate if someone could point me in the right direction regarding the solution for mobile and tablet issues.   

[Leonel Câmara]

1. What tablet are you testing this on, unless it's an old ipad, are you sure it only has 1024px?

3. Does your video tag has this controls="controls" in its attributes?

Anyway these aren't really web2py problems, they're CSS problems.

[Joe]

Hi Leonel, thanks very much for your reply! I appreciate it.

1. I removed all my added CSS from the web2py.css, just kept the original, default web2py CSS and the horizontal view on the 7 inch Samsung is still the same, In any case, I have to work on the CSS and try to fix it, I will work it out somehow.

(However, the mobile-menu nav issue is a problem I can not fix. I have posted a new question only about this issue as the mobile-menu being stuck on the "Home" page no matter what page the you are on is a big problem. I hope I will find the answer to this in the new post.)

3. Yes, my video tag has the controle="controles" and it works fine on the PC it just falls apart on mobile and tablets. I have an other site with the same video set up that's not a web2py site and the player is fine when I play the video on the same mobile and tablet. So this issue is only with my web2py site. The controls are there, they are just fallen apart, no play btn visible and the controls are segmented into several not connected pieces, it doesn't look like controls and doesn't work, I have never seen anything like this, no idea what to do.