[Resolved] Styling for Buddypress Register page

[andrew]

Hello,

The Buddypress registration page has two columns, and when viewed on mobile they just squish together, rather than stack.

Here’s how it looks on a desktop

Here’s how it looks on a phone

It would be great if these two sections would stack, and wondering if there was a way to accomplish that using CSS with the GP theme.

Here’s the actual registration page.

Thank you!

[andrew]

Hmmm, here’s the links again in case they’re not working right:
https://www.dropbox.com/s/8ebuegh1hfk4pid/Screen%20Shot%202017-04-20%20at%202.48.42%20PM.png?dl=0
https://www.dropbox.com/s/a0hnb2qlyoyv8gt/Screen%20Shot%202017-04-20%20at%202.48.55%20PM.png?dl=0
https://www.dropbox.com/s/bvmbprd5kcmvt7m/Screen%20Shot%202017-04-20%20at%202.56.52%20PM.png?dl=0

[Tom]

Hi there,

Give this CSS a try:

@media (max-width:768px) {
    #buddypress .standard-form #basic-details-section, 
    #buddypress .standard-form #blog-details-section, 
    #buddypress .standard-form #profile-details-section {
        width: 100%;
        float: none;
    }
}

[andrew]

That didn’t work, but this did the trick for solving the immediate pain:
`#buddypress .standard-form #profile-details-section {
float: none;
}

[Tom]

Strange, the above CSS does that exact thing in addition to making it 100% wide.

Glad you got it working either way 🙂

[Author]

Posts