Text overflowing comment area on Activity board
sudden156
✭✭
There are two comments on my Activity board that have run on past the light blue background.
I can't figure out why this has happened and can't reproduce the error. Perhaps someone can take a look who may know the answer?
Thanks
Best Answers
-
Options
Shadowdare
r_j MVP
Looks like you're modifying style.css. It's better to create a custom theme with a file called custom.css instead so that your style changes won't get replaced when you update Vanilla. Here is a tutorial by @vrijvlinder with steps on what to do: http://vanillaforums.org/discussion/24813/how-to-go-about-editing-the-default-theme
As for the activity comments issue, remove the width property from ".Activities .ItemContent" to make the comment text fit in the blue background area.
Add Pages to Vanilla with the Basic Pages app
7 -
Options
peregrine
MVP
@Shadowdare is correct.
I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.
5 -
OptionsShadowdare
r_j MVP
No problem.
The other two comments look normal because they have the HasPhoto class which has the width property set to auto.
.Activities .Item .HasPhoto .ItemContent { width: auto; margin-left: 42px; }Add Pages to Vanilla with the Basic Pages app
9
Answers
Looks like you're modifying style.css. It's better to create a custom theme with a file called custom.css instead so that your style changes won't get replaced when you update Vanilla. Here is a tutorial by @vrijvlinder with steps on what to do: http://vanillaforums.org/discussion/24813/how-to-go-about-editing-the-default-theme
As for the activity comments issue, remove the width property from ".Activities .ItemContent" to make the comment text fit in the blue background area.
Add Pages to Vanilla with the Basic Pages app
@Shadowdare is correct.
I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.
Good point Shadowdare about custom.css. I have as you say been altering styles.css, but I'd quite forgotten that updating Vanilla would mess around with that. Doh!
Thanks peregrine. The 631px must have been in the original styles.css, as I don't believe I have altered that, so it must be a fault in the current installation.
Yet why would it affect only those two comments and not the two below it, which seem to be as they should be? Perhaps because the upper two were originally made on someone's profile but the correct two (my own) were made on the activity board itself? If so, would that indicate some other change to make?
Many thanks to both of you for your quick and precise answers. Much appreciated.
No problem.
The other two comments look normal because they have the HasPhoto class which has the width property set to auto.
.Activities .Item .HasPhoto .ItemContent { width: auto; margin-left: 42px; }Add Pages to Vanilla with the Basic Pages app
Hah, thanks! I used to think I wasn't bad at CSS until I looked at styles.css. I have a lot of catching up to do...
It could be that those two comments have style added to them by the poster. I ran across a similar case where my theme was in question over a comment style . It turned out that the comment had html in it affecting it's look.
So edit the comment to see if it has any html added to it and remove it or fix it.
❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌
I think it was something to do with the poster, actually. It has now mysteriously corrected itself after the poster added an icon picture.
exactly. as shadowdare pointed out.
I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.
Slowlee slowlee catchee monkee.
I'm grateful for all the knowledgeable posters here. It's gradually sinking in.
try changing in custom.css.
.Excerpt {
max-width: px;
}
to the dimensions you want.
if need be try adding important.
max-width: px !important;
I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.
That's a good idea. I've done something similar with:
.Discussion .Comment .Message img {
max-width: 660px;
}
To stop massive images that people tend to post from going everywhere. I was surprised that this wasn't already in the code.
If you want to control the size of images and whatever they post please try the plugin I made for this purpose
http://vanillaforums.org/addon/controllsize-plugin
❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌
.Activities .ItemContent .Excerpt { display: block; max-width: 300px !important; }I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.
Oh that's an interesting plugin, @vrijvlinder, thanks for mentioning.
And cheers @peregrine.
This site is proving very useful for getting my CSS up to speed after a long lapse... all CSS snippets very welcome.