Footer columns on mobile

  • Resolved logicinn

    (@logicinn)


    5 years ago

    I am absolutely in love with the Sydney theme due to the fact that it is clean, I love the header sliders and it works so well with page builders (currently using Elementor). I have zero programming skills but I have played around with custom css to make my sites look beautiful (although very limited skills here as well!). I used the “4 column” setting for the footer and set it up in the widget space and it looks beautiful, but when I open it up on a tablet or mobile phone the columns are listed below each other. I was hoping there is a way to list 2 columns next to each other on tablet view, via custom css? I understand on mobile phone version the screen may be too narrow and I’m happy if the columns are listed below each other there. Is there maybe a way to do this for tablet view so I don’t have the problem of huge blank spaces to the right?

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hello,

    Can you please provide a link to your website in order to let me check your footer?

    Kind Regards, Roman.

    Thread Starter logicinn

    (@logicinn)

    Dear Roman, thanks so much for your response! Currently I am working on the site but with a “coming soon” plugin enabled. Will screenshots help or do you need to access the site? You can view the screenshots here: https://www.dropbox.com/sh/7w3akase0cztj6f/AACTi3iQzvjQRdkEaJOk9yF3a?dl=0

    You’ll see there are four columns. In mobile view it’s fine below each other but in tablet view I would’ve loved for it to show two columns next to each other in two rows.

    Once again thank you for your reply!

    Hello, and thank you for the screenshots.

    Try to use the following CSS code, you can add CSS code in Customize → Additional CSS section.

    @media (min-width: 768px) and (max-width: 991px) {
    #sidebar-footer .sidebar-column {
        width: 50%;
        float: left;
    }
    
    #sidebar-footer .sidebar-column:nth-child(1),
    #sidebar-footer .sidebar-column:nth-child(2) {
        margin-bottom: 50px;
    }
}

    Please feel free to ask any other questions that you might have.

    Kind Regards, Roman.

    Thread Starter logicinn

    (@logicinn)

    Roman you are my hero!! Thank you so much. This worked like a dream – I can’t thank you enough!

    Great, you are welcome! ??

    Kind Regards, Roman.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Footer columns on mobile’ is closed to new replies.