Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Main vertical height and Footer overlap

surface2air free asked 6 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

 



The problem is with your custom code. Please try to remove this part of code so it should work fine:

.tab-content {
  height: 760px;
}


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • 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