user tip A way of controlling big images added to forums

Here is a small bit of css to help control big images when added into forums using the embed option, this will also help stop the image pushing the text out of the post.
You just set the max size for how big you want the image to be. You can take a look at this sample forum on my site, all these images are very big and where added using the xxxlarge-800px option as it's the biggest size for them to choose.

You will also notice I added another image in the update bit of the forum, the bit in yellow, this has been set to clear so it does not fowl the other parts and also the updted info has been set so it stays at the bottom.

The css below I just added to the sites list css at the top. The first line dictates the max image size and the 100% width makes sure it stays with the confinds of the post and does not go off screen.

The second line is for when adding an image in the update section.

The third line is for the updated info text at the bottom of the post.

And the last one is to set the margin to 4px no matter what the user chose when they added the image. If they had say chosen 20px then the image gets pushed over so by setting it to 4px on the smaller screens it keeps it nice and tidy.

Here is the example forum: http://1940snetwork.com/founder/forum/27/test-post



.forum_post_text > p > img{ clear:both; width:100%!important; max-width:400px!important; }
.forum_post_attachment{ clear:both }
.forum_post_text .normal{ float:left; clear:both }

@media only screen and ( max-width:771px ){
.forum_post_text > p > img{ margin:4px!important }
}
updated by @john-bizley: 07/05/15 01:15:30PM

"The css below I just added to the sites list css at the top"

Where is that location, John- in the skin, or within which module? (i'm not using site builder)


--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015

It goes into one of the css files of your skin. Since you have a custom skin, you would edit one of the css files found at:
/skins/YOUR SKIN/css/(choose one).css

Pick one with a related name, maybe site.css if that's there.

Here is where the list css is. It's in the css files of the directory of your skin.
updated by @john-bizley: 06/04/15 01:22:41PM

Ah, ok thanks John! I will save this thread and if I have that same problem of overflowing forum images, I'll revisit this and apply the code... (possibly I may not run into the problem, who knows). Thank you!


--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015