1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Issues (cropped screen) with 'full-page-intro' – Full Page Intro, no navbar

hip free asked 6 years ago

Hello.

I'm making use of amazing MDB for my project of single landing page for domain selling. I'm using the Full Page Intro suggested layout and it works ok except for some views in small devices, usually when seeing them in landscape view mode. It also happens in PC screens depending of the window width. In those cases, probably because the contents are 'bigger' than expected, the page shows cropped with no option to see the full contents. And in this very case not even letting the form to be sent. Am I doing anything wrong or is it a bug?

You can check the website online here: http://www.bbrraassiill.com

And some screenshots as how you see it when cropped (note the scrollbar):
http://i1380.photobucket.com/albums/ah164/hiphiphiphip/01_zpszzklvcgq.jpg.html
http://i1380.photobucket.com/albums/ah164/hiphiphiphip/02_zpsi6gis2ac.jpg.html

TIA.
hip

Marta Wierzbicka staff answered 6 years ago

Hi, I'm glad you solved the issue. We are still improving our code and also we will try to improve intros sections. Best, Marta

hip free answered 6 years ago

Hello!
Finally I solved it by removing MDB and making use of the Bootstrap4 d-flex features to have a full screen page. I've lost the fade-in effect but now the whole content can be seen without being cropped. The form beautification I just tried to reply with custom CSS. For the Font Awesome icons I compiled them through icomoon.io so that the webpage only loads the necessary icons and don't overloads.

It now works, so I'm marking it as solved. Thank you for the attention.

hip free answered 6 years ago

Now it is even worse (after removing all extra CSS except for MDB original unaltered one). All my pages got cropped both top and bottom. If there's no way to (at least) scroll down and read/see the rest of the contents, I suggest (IMHO) the Full Page Intro class to be examined or, at least, documented as only suited for 'a couple of text lines long'. Otherwise it is unusable and definitely non-accessible. What a shame for such a complete framework :-(

Bartłomiej Malanowski staff commented 6 years ago

Please share some details with us. Please show us your code and the screenshot

hip free commented 6 years ago

Sorry for late reply. I'm not getting notification via email (?) You had the screenshots and link to the very page (so to the code as well), but now it's changed. Anyway, I now solved it. Ty for the attention

Ollie Vincent pro answered 6 years ago

It's worth pointing out that it wont respond on every single resolution. If you are shrinking your browser window, you are most likely getting a resolution that does not exist on any mobile device. I think on phones and tablets it works fine. What do you think? If you wanted you could create media queries for all sizes. Thanks

hip free commented 6 years ago

Thank you Ollie. No, I'm not playing with my browser window. I'm testing on different existent devices. On most mobiles (resolutions) is NOT working. It DOES crop the contents (both on top and bottom) with NO chance for scroll. It is easily view by visiting the link in original post (above). Then I assume what you mention: It DOES NOT respond to some screen window resolutions, specially to the smaller ones (mobile phones) in this case. At the moment, as a temporary solution, I'll try to cut out some info in my websites (some 10 I have with same structure and similar contents) to make them smaller and avoid cropping. If in need to keep or even add some more contents, I'll post the issue at Stackoverflow or will move to a non-MDB solution. The media queries solution you suggest give no clue at this point. Thank you anyway for your time. Have a good one!

Ollie Vincent pro answered 6 years ago

Hi,

You have some css @media (max-width: 850px) and (min-width: 800px){html, body, header, .view{ height:650px;}} (as shown in browser).

hip free commented 6 years ago

Ty Ollie. You're right. That CSS I forgot while trying yo get rid of the issue. Now I uploaded with those lines removed. Just the same: at some widths the content is cropped on both top and bottom. CSS is now only default Bootstrap and MDB. :-(
Write
Create snippet
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: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes
Tags
About author
hip
10Support score
1Questions 2Answers 0Snippets