Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by nicolasdeknoop
nicolasdeknoop
6,943 Points

Some weird margins on mobile devices

Hello,

Here is the site I'm working on:.............

I have been having issues with page height on mobile devices - on desktop I don't seem to be having any issues.

The pages specifically are:

home about-jenni/faq supervision groups

If you look at these pages on mobile device there is a large margin at the bottom of the site content, i.e. before the footer. Initially I had a top and bottom margin issue, but then added justify-content: flex-start; to .site-content which at least reduced it to a margin bottom issue. Most noticeably the issue appears on the faq page, and it seemed that this issue came from the jQuery accordion. I think what is happening is that when the page loads the accordion is fully open and so the browser calculates the full page height of that, but does not reduce when accordion items are closed. This results in a massive margin and need to scroll for ages to reach the footer. As there is an accordion on the supervision and groups pages i thought this was it. But then the issue also appears on the home page, so it has me a little stumped to say the least. I have searched for solutions on google, but can't seem to find the solution I'm looking for. If anyone has solved a similar issue I would be most appreciative of any pointers in the right direction.

many thanks, Nic

nicolasdeknoop
nicolasdeknoop
6,943 Points 
// to open the accordion
jQuery(document).ready(function() {

    jQuery(document).ready(function(){
        jQuery('.faq-accordion .faq-answer').slideUp();
        jQuery('.faq-accordion .faq-question').click(function(){
            jQuery(this).next('.faq-accordion .faq-answer').slideToggle('fast');
        });
    });

});
// end open accordion
nicolasdeknoop
nicolasdeknoop
6,943 Points

I have added a red-border around .site-content to try see more clearly what's going on...

2 Answers

Ryan Boone
Ryan Boone
26,518 Points
Ryan Boone
Ryan Boone
26,518 Points

What device are you seeing this issue? Is it multiple devices?

nicolasdeknoop
nicolasdeknoop
6,943 Points

Hi Ryan, thanks for your response, I have tried on iPhone and iPad. Home page issue more noticeable on iPad. Tried both chrome and safari...

Ryan Boone
Ryan Boone
26,518 Points
Ryan Boone
Ryan Boone
26,518 Points

I suspect it's the combination of flexbox and jQuery's pixel-based animations that's causing the problem.

I unfortunately can't get the mobile menu to appear in Chrome's emulation, so I can't test. Hopefully someone else has the ability to on mobile!

Sorry I couldn't be of more help.

nicolasdeknoop
nicolasdeknoop
6,943 Points

No problem Ryan, thanks for trying! Best wishes, Nic