Archived topic
Styling for Buddypress Register page
4 replies · Started by andrew on April 20, 2017
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!
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
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;
}
}That didn't work, but this did the trick for solving the immediate pain:
`#buddypress .standard-form #profile-details-section {
float: none;
}
Strange, the above CSS does that exact thing in addition to making it 100% wide.
Glad you got it working either way :)
