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

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: http://gridinteractive.com/mg/default.htm 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: https://flickity.metafizzy.co/options.html). Testing project on Quirktooks > Screenfly http://quirktools.com/screenfly/#u=http%3A//gridinteractive.com/mg/default.htm&w=375&h=667&a=37&s=1 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

---