Topic: Responsive landing page design errors: Fonts, Flex, Grid and MDBootstrap

surface2air free asked 5 years ago

Hi MDBootstrap Support, Thanks for taking the time to review this question: I have a sample page at the following link that is a concept for a home page with the following structure: + A full screen background image and mask overlay (MDBootstrap) + A card slider powered by Flickity JS + 3 Bootstrap Columns + A page footer View page: On smaller screens, the header font and introductory font on page top (BG IMG + Mask + Overlay) does not appear responsive and contained within the viewport display. The header font -- "Gauthier & Associates" - extends outside the frame and pushes up overlapping the top nav bar. The introductory para text below the header crunches up into a smaller column. I know I would probably need to write media queries for smaller screen sizes to correct this, but the design is impacted like this on the rest of the page, including the card slider (powered by Flickity JS: Testing project on Quirktooks > Screenfly I am looking for some design assistance to untangle these overlapping issues and get some help with the responsiveness. Any pointers or suggestions are greatly appreciated! Thank you! Have a great weekend. Best, Eric Seattle, Washington


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



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.5.10
  • Device: Smaller Viewports
  • Browser: All
  • OS: iOS 12
  • Provided sample code: No
  • Provided link: No