[Resolved] Child layout appears under parent in archive on responsive only

[Author]

Posts

[pierreV-2]

I have an issue with my layout for Header and Footer (only with the archives does the problem appear even though the same layout is being used elsewhere).

When switching to responsive view (on mobile or on small screen to replicate the mobile experience), in an archive the footer moves to the top above (and slightly on top) of the child layout (the archive content).
As an example: hidden link

Watching the pages on full screen, there is no issue.
I tried turning the footer off on mobile turn it off by adding to the theme CSS the following:

@media only screen and (max-width: 650px) { .footer-area {display: none; }}

but that doesn't help (at first view the footer is at the bottom and when scrolling up & down, it moves back to the top.

Any idea what I should change?
I checked my themes settings (Avada) but can't find anything leading me to solving it there.

Thanks,

Pierre

[Nigel]

Hi Pierre

Sorry for the delay in replying to you, the support queue suddenly became very busy.

I visited your site and the footer seems to be behaving entirely normally on small screens (I'm using the responsive settings in the browser dev tools to mimic different screens).

Did you manage to fix this yourself already?

[pierreV-2]

Hi Nigel,

No worries about the delay, we had a long weekend 🙂

I haven't done a thing to resolve it, wouldn't know where to start but for a moment I noticed it was behaving normally.... but after scrolling a few times up and down (both on the Firefox responsive settings in Dev mode and on my Samsung Note 4), it went back to misbehaving (see attached picture).
I tried to use a different theme (using Avada now) but as there's not footer set up, I couldn't replicate it.

Thanks

[Nigel]

Hi Pierre

I'm not sure if the problem isn't with the responsive simulators and the browser cache, because I can't reproduce the problem when using testing on a narrow viewport on my desktop, and so I loaded your site on my phone and tested the page in the Chrome and Firefox mobile browsers and the page (and the footer) worked as expected.

I scrolled back and forth, top to bottom, lots of times and I couldn't "break" the site, it all looks fine.

I then tried to test it on my iPad in Safari but by this time your site had become unresponsive and I couldn't visit it in my desktop anymore, either, but in the real-world testing I was able to do I can't see the issue.

[pierreV-2]

Hi Nigel,

The problem still appeared on my (and some other) devices. I did try with some friends' devices and it was fine.
Somehow a few days later (though no idea what I did), it seem to work fine now (I did remove the widget in the footer on smaller screens).

Thanks!