Archived topic

Loop layouts, two columns layout on mobile

7 replies · Started by Carsten on January 26, 2019

Viewing posts 1–8 of 8

January 26, 2019 at 3:54 am #792650

Hi there, on desktop I have a three columns layout of my buddypress members directory.
Customize>Buddypress>Loop layouts> Members >Three columns layout

On Mobile, this turns into a one column layout. I would like to have a two column layout on the mobile, how do I achieve this?

Regards
Carsten

January 26, 2019 at 6:41 am #792736

Hi there,

This is out of our scope. But if can you provide a login so we can see the Site then we may be able to assist with some CSS.

January 26, 2019 at 6:53 am #792856

Thank you David, the login information is send under Account Issue.

I am sorry if this is not theme related, I thought so, as the loop layouts is part of dashboard>appearance >customize. But I appreciate if you will take a look at it.

Thanks

January 26, 2019 at 9:43 am #792977

Hi there,

Did you get this sorted? I'm seeing 2 columns on mobile: https://www.screencast.com/t/FkYAYc7B

Let me know :)

January 26, 2019 at 4:25 pm #793215

Hi Tom, thanks for your interest,

In vertical position, I only have one column.

https://imgur.com/a/imqTsmD

January 26, 2019 at 5:51 pm #793258

Ah, on super small screens.

Try adding this CSS:

@media (max-width: 500px) {
    .grid>li.item-entry {
        float: left;
        margin: 0;
        width: 50%;
    }

    .grid.three>li:nth-child(odd), .grid.two>li:nth-child(odd) {
        padding-right: 10px;
    }
}

January 27, 2019 at 3:28 am #793463

Hi Tom, if you consider the iPhone 6/7/8 screens as super small, then yes ;-)

It worked out perfectly, this was exactly what I was looking for.

Thanks for your help!

Regards
Carsten

January 27, 2019 at 9:22 am #793720

You're welcome :)

This archived topic is closed to new replies.

Start building better websites today.