This topic has 11 replies, 2 voices, and was last updated 8 years by 
-
-
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.
Hello, try adding this to style.css
COPY CODEdl.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 solutionLaura 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 🙂
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.Hello, try this instead
COPY CODEul.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 solutionLaura 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 🙂
That fixed the Questions and Answers lining up but still cause long answers to break out of the container in the full profile.
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 solutionLaura 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 🙂
IT still shows the answers not wrapping or statying in the container in the full BOTTOM section of the profile
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 solutionLaura 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 🙂
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.cssCOPY 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 solutionLaura 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 🙂
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;
}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 solutionLaura 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 🙂
You must be logged in to reply to this topic.
