Topic: Main vertical height and Footer overlap
surface2air free asked 5 years ago
Hi Support,
I am working on a project where I am including a Mapbox map on the page. Firstly, there were some creative hacks to include the map on the page relative to using the MDBootstrap top nav bar, which looks fine except that the page does not scroll behind or "under" the nav. The nav is sticky at top.
Of particular concern is the "length" of the <main> section content on the page which gets overlapped with a kind of floating footer section towards page bottom. This is visible on smaller viewports for devices like smartphones and tablets.
Here's the page (test): http://gridinteractive.com/mg/contact.htm
Responsive testing with Screenfly:
http://quirktools.com/screenfly/#u=http%3A//gridinteractive.com/mg/contact.htm&w=375&h=667&a=37&s=1
I would like to be able to get the footer fixed at page bottom below the map directions content. As a plus, it would be nice to close the issue with the top nav and page scrolling, too.
Thank you!
Eric
Seattle, Washington
Bartłomiej Malanowski staff answered 5 years ago
The problem is with your custom code. Please try to remove this part of code so it should work fine:
.tab-content {
height: 760px;
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: Smaller Viewports
- Browser: All
- OS: iOS & Android
- Provided sample code: No
- Provided link: No