[Support request] Mobile Footer 2 columns

Home Forums Support Mobile Footer 2 columns

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #624633
    ZZZ

    Hello there,

    I need help on footer widgets. Was able to create 2 columns for tablet view but can’t seem to get it right for mobile view for the footer.

    I want the same view for mobile as the tablet. 2 Columns.

    can’t see this on website cause it’s in staging mode.

    #624701
    David
    Staff
    Customer Support

    Hi there,

    you can try this, but i think you will find that 2 columns on mobile may be a little too cramped:

    @media (max-width:768px) {
        .inside-footer-widgets>div {
            float: left;
            width: 50%;
    	clear: none;
        }
    }
    #624731
    ZZZ

    Great,

    However, i would like widget 1 & 2 to be the same row, then 3 & 4 to start a 2nd row. how do i make this?

    #624752
    David
    Staff
    Customer Support

    Lets try using Flex instead:

    @media (max-width:768px) {
        .inside-footer-widgets {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -ms-flex-direction: row;
            flex-direction: row;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        }
        .inside-footer-widgets>div {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 50%;
            flex: 0 0 50%;
        }
        .inside-footer-widgets>div:first-of-type {
            -webkit-box-flex: 1;
            -ms-flex: 1 0 100%;
            flex: 1 0 100%;
        }
    }
    
    @media (min-width:768px) {
        .inside-footer-widgets>div:first-of-type {
            display: none;
        }
        .inside-footer-widgets>div.grid-20 {
            width: 25%;
        }
    }
    #624761
    ZZZ

    great! it worked perfectly.

    Now i would like to add 1 global widget for mobile but this 1st widget should be only in 1 column while the rest are in 2 column as per normal.

    Is this possible? What’s the best way to do it?

    #624793
    David
    Staff
    Customer Support

    I updated the code above to cover that. Increase footer widgets to five and put the mobile only widget in the first widget area.

    #624893
    ZZZ

    It works on mobile now, thanks.

    Sorry forgot to mention, I would like desktop view to remain looking with only 4 widgets.

    At the moment it is looking with 5 widgets except with the 5th footer widget empty.

    #624912
    David
    Staff
    Customer Support

    Edited the code above to adjust the widget 🙂

    #624923
    ZZZ

    amazing! got what I wanted with crazy fast support! thanks a bunch!

    #625042
    David
    Staff
    Customer Support

    Awesome. glad i could help

    #625369
    ZZZ

    Hi Again,

    Sorry I realised that the 5th widget is not showing on homepage but it is okay on the rest. Any way to fix this?

    #625488
    David
    Staff
    Customer Support
    #625503
    ZZZ

    yep that fixed it. thanks again!

    #625511
    David
    Staff
    Customer Support
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.