How to make a responsive Full Width Footer

  • Hi All,


    I have a problem to create a full width footer without useing overflow-x and nasty overcomplicated css.


    How it is possible in pagekit to create a nice, full width footer?


    Right now I have to use this, but it has problems on the iOS system, the overflow property is crashes with the off-canvas menu, (the menu is under a white layer)


    I found this as well: https://codepen.io/chriscoyier…2b7db1c7281d0f53572c6cfaf

    Its a good solution, but unfortunately, the horizontal scrollbar is there...




    Any suggestions?


    Many thx,


    Balazs

  • It is pretty easy mate depends on the template you use. If you mind you can provide some more info like which template you use and in best case the url where some things can be tested on the fly.


    In theory it will go full width by it's own as long it is not in same container as main div is!


    To prevent a "break out" of a div container you can use the css max-width property and sometimes you just have to add some viewport css styles to prevent breaking out on mobile devices, especially if you use custom div classes.

  • This is the footer code:


  • Well that is not hard, but i have to check out your page mate the frontend is enough in most cases! if you mind to post the url here you can write me a private message i will check it out. The template php is not the problem seems to be as i checked and it is the default code of tm-footer in that template, i use the same as you do.

  • Full solution for Team Cards on what addictedhu wanted to reach the following:


    template.php changes:


    changes in the index.php:


    Code
    1. 'positions' => [
    2. 'navbar' => 'Navbar',
    3. 'top' => 'Top',
    4. 'sidebar' => 'Sidebar',
    5. 'bottom' => 'Bottom',
    6. 'footer' => 'Footer',
    7. 'footer_a' => 'Footer A',
    8. 'offcanvas' => 'Offcanvas'
    9. ],


    Create now an empty widget on the new -> Position A with Panel Style: "None" and you good to go, as long the background image was already set. :)


    No changes on original footer div stylings needed! If someone want to see the results a small screenrecording video:


    https://dukeshome.spdns.de/s/AwxFcmR2jatNX2z