Topic: Full BG Landing Page with Offset Font issues not displaying properly across Viewport sizes
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
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
Add comment
Hi,
The reason why you heading has problems is a fact that you are using a width: 40vh on paragraphs with class 'intro-para', if you will remove, it will show well. Next problem is that you are using a too big font size if you change it to smaller and add some paddings, everything is looking good.
TIP: You are using version 4.5.11 of MDB Free, I recommend to upgrade to newest version. We fixed a lot of bugs and added new features.
Link to screen : link
Best,
Piotr
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: MDB jQuery
- MDB Version: 4.5.10
- Device: All
- Browser: All
- OS: iOS
- Provided sample code: No
- Provided link: Yes
Tags