Buddypress Profile Fields

[Kieran]

Hi,

I’ve got a quick question regarding CSS of profile fields on desktop / mobile. How would I go about having the profile fields and profile data on two separate lines in desktop as it is in mobile. I attach two images below to explain what I am on about.

Thanks in advance for your response 🙂

[Kieran]

Forgot to add screenshots

(Desktop)

Attachments:

You must be logged in to view attached files.

[Kieran]

Forgot to add screenshots

(Mobile)

Attachments:

You must be logged in to view attached files.

[sharmstr]

try this

COPY CODE

#buddypress div.profile .dl-horizontal dd {
  margin-left: 50px;
  clear: both;
}

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

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Kieran]

Hi @Sharmstr,

I applied the above CSS to the child theme, it worked in the sense of creating two different lines, however, it’s not aligned (see screeenshot below), any thoughts? Thank you for your reply 🙂

[Kieran]

DOH! I forgot the screenshot again! (bad day..)

Attachments:

You must be logged in to view attached files.

[sharmstr]

I dont see a screenshot, but play with the margin-left settings.

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

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[sharmstr]

Try all of this instead

COPY CODE

#buddypress div.profile .dl-horizontal dt {
  float: left;
  text-align: left;
}

#buddypress div.profile .dl-horizontal dd {
  clear: both;
  margin-left: 0;
  text-align: left !important;
}

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

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[sharmstr]

See attached from the above code

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

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

Attachments:

You must be logged in to view attached files.

[Kieran]

Hi,

I just tried your CSS provided with a tweak for margin on both and it worked a charm, I forgot to mention I was using the tabs from Kleo instead of the default (as per your screenshot above), thank you so much for your help as ever @sharmstr !

COPY CODE

#buddypress div.profile .dl-horizontal dt {
  float: left;
  text-align: left;
margin-left: 15px;
}

#buddypress div.profile .dl-horizontal dd {
  clear: both;
  margin-left: 15px;
  text-align: left !important;
}

[sharmstr]

Great. 🙂

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

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Fwbox]

Hello Sharmstr,

I see your screenshot with your icon tab on profil ? You have use a plugin or development for this ?

Thanks

[sharmstr]

I dont understand your question. There is nothing custom there. The profile icon is there by default

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

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Fwbox]

Sorry,

I’m looking for a custom menu to profil (see screenshot)

Attachments:

You must be logged in to view attached files.

[sharmstr]

That’s not custom. That’s why I’m confused about your question. http://seventhqueen.com/themes/kleo/members/demo/

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

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Fwbox]

Thanks, but i have Sweetdate and they have no icon with the profil menu.

[sharmstr]

Then I cant help you. This is a Kleo forum.

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

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Author]

Posts