Adventure Log Index Text

VESIMUS

Could someone take a look and tell me what I would have to do for the text in the adventure log post index to stop running straight into the border of the post window. Id except any alternative at this point.

/* ADVENTURE LOGS */

/* Adventure Log List Page */

/* List Page Entry */

/* this is the setting that determines what my Adventure Log list text backgrounds look like */

.adventure-log-post{background-image: url(https://db4sgowjqfwig.cloudfront.net/campaigns/152149/assets/666703/Core_wikibackground_parchment.png?1479896636);width: 850px;}

/* this setting removes the white background image from the "Create New Post" bar */

.adventure-log-index .adventure-log-new-container {background: none;}

/* determines entry height and coloration */

.adventure-log-index .adventure-log-post{height: 290px !important;width: 850px;}

.adventure-log-index .post-content{height: 350px;

width: 850px;}

.adventure-log-index .overflow-fade-out {position: relative;width: 110%;height: 60px;bottom: 40px;}.small-2.columns.date-column.post-date{

height:400px;}

.adventure-log-index .post-date, .adventure-log-show .post-date {background-color: rgba(43, 43, 43, 0.99);max-height: 400px!important;}

.adventure-log-index .adventure-log-post .columns{height: 85px;}

/* List Border */

/* this setting determines what the border fade on my adventure log list looks like */

.adventure-log-post{box-shadow: 0em 0em 1em 0em black, 0em 0em 1em 0em black, 0em 0em 1em 0em black; border: 0px solid transparent; background-color: transparent;}

/* Adventure Log Calendar */ this setting darkens the background behind the adventure log calendar to make it easier to read */

.row.collapse{background-color:rgba(0,0,0,0.5);}

 /* this setting changes the color of the active Month/Day selection to make it easier to read and match the theme */

.adventure-log-index-filter li.active, .adventure-log-index-filter li.active a {color: #ffad59;}

/* Adventure Log Pages */

/* Adventure Log Title */

/* adventure log title background image */

/* this is the setting that determines what my Adventure Log title text background looks like */

.post-header-container{background-image: url(https://db4sgowjqfwig.cloudfront.net/campaigns/152149/assets/666703/Core_wikibackground_parchment.png?1479896636);width: 850px;}

/* Adventure Log Border Fade */

/* this setting determines what the border fade on the adventure log posts looks like when you are viewing them individually */

.adventure-log-post-container.full{box-shadow: 0em 0em 1em 0em black, 0em 0em 1em 0em black, 0em 0em 1em 0em black; border: 0px solid transparent; background-color: transparent;width: 850px;}

/* Adventure Log Size */

/* this setting sets the width of the Adventure Logs */

.adventure-log-post-container.full body.campaign-public-layout .post-section.post-main {background-color: white;width: 850px;}

/* Adventure Log Comments Background Image */

/* this is the setting that determines what my Adventure Log comments background looks like */

.post-comments.post-section{background-image: url(https://db4sgowjqfwig.cloudfront.net/campaigns/152149/assets/666703/Core_wikibackground_parchment.png?1479896636);max-width: 850px;}

Johnprime

If you could post you site so I could view the page in question, then I could look at the css that is generating that copy the part that is actually hitting the border and let you know how to fix it. You could also possibly do this on your own if you are familiar with HTML and CSS. Also you could possible see what the HTML is yourself.

If for instance you are viewing the page in Firefox, you right click with the mouse on the copy in question and select at the very bottom of that pop up menu, Inspect Element (Q). It might not be at the very bottom, but it will be near it. This will bring up the inspection window which should show your HTML in a left hand panel and have the CSS in a right hand panel. If you can identify the element that contains the copy, could be a div or p tag, you can then determine what it's CSS class is.

More than likely you can change the width of the CSS to fit what you need, say reducing 100% width to 95 or 90%.

VESIMUS

Alright, this is the site.

https://d20beyond.obsidianportal.com/

VESIMUS

Can that only be done with Firefox?

Bortas

The tags you are looking for are margin and padding, used in whichever makes sense to you

Margin- the distance in between elements

PAdding- the distance between the border of the element and the content inside of it.

 

Most of the issue you can see are padding related. try:

.adventure-log-show .post-content {padding-right: 3%; }

or something similar.

-bort

Johnprime

Yeah, margin and padding would work as well.