Width of input fields on BuddyPress profile page

Hi Martin,

Please use the below CSS snipper in your KLEO Child themes style.css by going to WP Admin > Appearance > Editor > KLEO Child > Style.css

.bp-user input#email {
    width: 33%;
}
.bp-user input#pass1 {
    width: 33%;
}
.bp-user input#pass2 {
    width: 33%;
}

Change the 33% value to suit your design needs. Once saved clear all of your caches – server, WordPress, and browser to see the changes.

Thanks,

Kieran

Hi,

Please try adding the below mobile specific CSS

@media screen and (max-width: 991px) {
.bp-user input#email {
    width: 100% !important;
}
.bp-user input#pass1 {
    width: 100% !important;
}
.bp-user input#pass2 {
    width: 100% !important;
}
}

You’ll need to manually purge your cache for your browser on your device to see the changes.

Kieran

Hi,

My apologies, I was logged in as an administrator and forgot about that field.

I have updated both CSS snippets for you below

Regular

.bp-user input#pwd {
    width: 33%;
}
.bp-user input#email {
    width: 33%;
}
.bp-user input#pass1 {
    width: 33%;
}
.bp-user input#pass2 {
    width: 33%;
}

Small screens

@media screen and (max-width: 991px) {
.bp-user input#pwd {
    width: 100% !important;
}
.bp-user input#email {
    width: 100% !important;
}
.bp-user input#pass1 {
    width: 100% !important;
}
.bp-user input#pass2 {
    width: 100% !important;
}
}

Please remove the CSS you already have and replace with the above. Clear all caches to see the changes.

Thanks,

Kieran

No worries Martin, happy to help 🙂

Kieran