Width of input fields on BuddyPress profile page

[msteimann]

Hello,

I would like to enlarge the width of the input field for E-Mail address on a BuddyPress profile page, so that a long address fits in. For design reasons I would also like to have all 4 input fields on this page running equal width. Can you please provide me with some css code?

Regards,

Martin

Attachments:

You must be logged in to view attached files.

[Kieran_SQ]

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

COPY CODE

.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 there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[msteimann]

Thank you Kieran, the css works perfectly fine on desktop browsing, but the scaling ist not present on mobile browsers.

[Kieran_SQ]

Hi,

Please try adding the below mobile specific CSS

COPY CODE

@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 there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[msteimann]

Great, this did the mobile trick! The only field which needs fixing is the „lost password“ field. Which ccs code for desktop and mobile browser would help?

Attachments:

You must be logged in to view attached files.

[Kieran_SQ]

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

COPY CODE

.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

COPY CODE

@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

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[msteimann]

Perfect now – thanks a lot!
Regards,
Martin

[Kieran_SQ]

No worries Martin, happy to help 🙂

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[Author]

Posts