Change number of columns in footer depending on the screen width

  • Anonymous User 17836910

    (@anonymized-17836910)


    6 years, 5 months ago

    Hello.

    I was able to create a Child theme with four columns in the footer, however, I am not able to change them to appear in 2×2 when the width is for tablets.

    For big and small screens is okay, but not for middle screens, the four columns need more space between them.

    I provide you this part of the code I used if it helps:

    $has_sidebar_1 = is_active_sidebar( 'sidebar-1' );
$has_sidebar_2 = is_active_sidebar( 'sidebar-2' );
$has_sidebar_3 = is_active_sidebar( 'sidebar-3' );
$has_sidebar_4 = is_active_sidebar( 'sidebar-4' );

    Could you give me a hand?

    Thanks for your time.

    • This topic was modified 6 years, 5 months ago by Anonymous User 17836910.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Jarret

    (@jarretc)

    6 years, 5 months ago

    Do you have a link to the live site? Most likely it’ll need to be handled by CSS with some media queries

    Thread Starter Anonymous User 17836910

    (@anonymized-17836910)

    6 years, 5 months ago

    @jarretc

    You can access to the site here: [redacted]

    I think I need this media call to be applied only to this size of the screen:

    @media only screen and (max-width: 48em) and (min-width: 22.5em) { 
 .???? {
 ????
 }
}
    Jarret

    (@jarretc)

    6 years, 5 months ago

    Hi, the following should work from testing in Chrome

    @media only screen and (max-width: 48em) and (min-width: 22.5em) { 
    .footer-widgets-wrapper .footer-widgets {
        display: inline-flex;
        max-width: 49.5%;
    }
}
    Thread Starter Anonymous User 17836910

    (@anonymized-17836910)

    6 years, 5 months ago

    @jarretc
    I tried the code and works fine, but I gave you the max and min widths wrong. It is applied to mobiles phones too, for example.

    I thought the tablet size was 48em (768px) and the mobile was 22.5em (360px).

    Do you know where I can check these numbers in Twenty-twenty?

    Jarret

    (@jarretc)

    6 years, 5 months ago

    Hi, you should just have to modify the 48em and 22.5em values to match what you want. What browser widths are you seeing it on that it should be in the 2×2 layout?

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

The topic ‘Change number of columns in footer depending on the screen width’ is closed to new replies.