CSS changes to footer when viewed on mobile devices

Hi,
Changes to site when viewed on mobile devices - http://take.ms/oa3rx
Is it possible to move the cloud further to the left + disable the sticky footer so user has to scroll to bottom of page in order to see it ?
Domain - http://tinyurl.com/ozqyopf
Support access is open

Thanks
Tom

  • Luís
    • Support

    Hi @Tom,

    I hope had been good today!

    Can you try this CSS code (insert it in your media query):

    .site-content {
        width: 100%;
        float: left;
    }
    
    #foot_wrapper {
        float: left;
        position: unset;
    }
    
    .site-footer::before {
        left: -29px !important;
        position: absolute !important;
    }

    Cheers, Luís

  • Tom
    • Code Wrangler

    Hi Luis,
    Thanks very much for CSS code, i have added it and cleared cache on mobile device, and re-checked. the position of the footer looks better but its still sticky at the bottom of the screen. could it be that one of the previous changes to site is restricting the position of that cloud as a sticky footer? i think might be from this one - https://premium.wpmudev.org/forums/topic/could-i-have-some-help-with-css-on-site-please#post-1012217 is it possible to disable it just on mobile devices ? if it works without breaking site ?

    Thanks
    Tom

  • Tom
    • Code Wrangler

    HI Luis, just checked again,

    When in default android internet explorer on Samsung Note 4 it appears still sticky (even after clearing Cache)
    When checking in Google Chrome on Samsung Note 4 it does not appear sticky, however the cloud in the footer is taking up the full width of the page again, and thus breaking the site on mobile devices.
    When checking with Firefox on Samsung Note 4 it does the same as Google Chrome, Footer not sticky but the cloud in footer breaking the site layout.

    I assume that it means that its no longer sticky, and the first browser has some caching issues. That said would it be possible to try resolve the footer cloud ? perhaps disabling the wide one that currently appears (on mobile devices only) (so its still same on desktop browsers)
    Then create a duplicate but upload a much smaller cloud file. then make it so that it only appears on mobile devices i.e. below a certain screen width it would just change to the smaller graphic ?

    Thanks
    Tom

  • Luís
    • Support

    Hi @Tom,

    I hope had been good today!

    Honestly, I tested it using the Firefox add-ons and in different mobile devices and I was unable to replicate.

    I checked your Custom CSS and I saw some duplicate code and media queries wrong declared and it could be conflicting for some reason.

    I changed some code that I gave you before to the correct places and I removed some duplicates.

    Clean all the browsers cache and try it again.

    If the issue stills, after we try add more CSS, I would like to check again your code, remove duplicates, etc...

    What you think?

    Cheers, Luís

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.