Design is broken because of long title. How can i fix it?

lonare

Hi Design for my forum is broken because of long title how can i fix it. When I enabled your added and added few discussion with short title it was fine. But the moment I added a long title it broke as you can see here on my forum.
https://www.lonare.com/
Can you please tell me how I can fix it. thanks

R_J

I know the answer couldn't be satisfying for you, sorry, but it is working with the default theme. I'm quite bad at styling and it was hard for me to make it work as it does right now. I just have tried to solve the problem with your theme (glad you've posted a link), but I was unable to get it working.

Maybe @hoangminhon could support, since he is the author of the theme and for sure far better with css than I am!

lonare

hi @hoangminhon would you be able to help me with this design issue?

vrijvlinder

Please give an example of where this is happening, I do not see a problem.

R_J

This one has a long title:
https://www.lonare.com/discussion/10/thoughts-on-shopify-vs-amazon-vs-personal-website-and-dropshipping-from-ali-express

It should look like that:
https://www.lonare.com/discussion/12/we-all-have-something-special-inside-us

vrijvlinder

I don't see the problem, both look the same , they look fine on a mac using chrome.They look good to me..

vrijvlinder

If it's the arrows , which I don't see a problem , but you want them to line up to something like the avatar of the poster, you must make room by adding this to the custom.css of the theme. The first block makes room for the arrows and the second moves it where it is expected to be next to the Avatar.

body.Vanilla.Discussion.Index .DiscussionHeader {
    margin: 5px 40px 10px;
}

body.Vanilla.Discussion.Index .RatingDiscussion {
    padding: 8px;
    position: absolute!important;
}

vrijvlinder

@lonare have you tried this yet ?

lonare

@vrijvlinder yes it did worked thanks allot

lonare

Hi @vrijvlinder it did worked when a user is not logged in but when i logged into my account and saw the page its looking broken have a look here:

vrijvlinder

ok, the code I gave you only works in the discussion page not the index. I thought that was the only place it happened , sorry...

so try to add this instead

.DataList .Title, .DiscussionHeader{
margin: 5px 40px 10px;
}

.RatingDiscussion {
    padding: 8px;
    position: absolute!important;
}