Long profile Fields

[atomikjon]

The website I built for my client has some long profile questions so that half of the question gets cut off from user view in the profile view.

 

Is there a way to program a line wrap so that the questions gets broken down into multiple lines?

 

For Example:

Asking single word questions is fine, such as “Age:”

 

However if you ask someone a long question like, “How long have you been with your husband or significant other?” the question gets cut short in profile view.

[Laura]

Hello, try adding this to style.css

COPY CODE

dl.dl-horizontal dt, dd {
    white-space: pre;
    word-break: break-word;
    text-align: justify;
}

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

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

Always happy to help you 🙂

[atomikjon]

That worked for the blue short profile, but in the full profile it has broken the answers. Go to a profile
http://www.surroconnections.com/surrogates/profiles/stephannie-2/
and scroll down to the full profile (white background and you will see the answers no longer line up with the questions and break outside of the boundary.

[Laura]

Hello, try this instead

COPY CODE

ul.tabs-content.custom dl.dl-horizontal dt, dd {
    white-space: pre;
    word-break: break-word;
    text-align: justify;
}

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

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

Always happy to help you 🙂

[atomikjon]

That fixed the Questions and Answers lining up but still cause long answers to break out of the container in the full profile.

[Laura]

Hello, they are global so the style applies to all

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

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

Always happy to help you 🙂

[atomikjon]

IT still shows the answers not wrapping or statying in the container in the full BOTTOM section of the profile

[Laura]

Hello, we can help you with small modifications but its a custom request and requires some time and development, i suggest to hire a freelancer to do it for you 🙂

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

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

Always happy to help you 🙂

[atomikjon]

How is it custom when it’s a bug in your template. I made no adjustments.

[Laura]

Hello, when its a change to the theme style not related to the theme functionality then its a custom request.
This should work, add to style.css

COPY CODE

.profile .dl-horizontal dt {
    float: left;
    width: 230px;
    line-height: 2.3em;
    overflow: visible;
    clear: left;
    text-align: right;
    text-overflow: ellipsis;
    white-space: pre-line;
    font-weight: bold;
    padding-right: 20px;
}
.profile .dl-horizontal dd {
    margin-left: 190px;
    white-space: pre-line;
    line-height: 2.3em;
    overflow: visible;
    padding-right: 20px;
}

Let me know if it helps 🙂

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

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

Always happy to help you 🙂

[atomikjon]

Thank you. It did the trick mostly. I had to adjust the width from 230 to 190 or the columns overlapped:

.profile .dl-horizontal dt {
float: left;
width: 190px;
line-height: 2.3em;
overflow: visible;
clear: left;
text-align: right;
text-overflow: ellipsis;
white-space: pre-line;
font-weight: bold;
padding-right: 20px;
}
.profile .dl-horizontal dd {
margin-left: 190px;
white-space: pre-line;
line-height: 2.3em;
overflow: visible;
padding-right: 20px;
}

[Laura]

Hello, i am glad it helped 🙂

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

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

Always happy to help you 🙂

[Author]

Posts