Recent Activity on Obsidian Portal Community Forums
-
-
CommentSCDragon64, Eddie_and_Maureeen, kimberleechamberlain, morganah, transatlanticbriton and 2 others joined.July 24Welcome Aboard! -
-
-
-
-
-
CommentJuly 9This was the code I entered: I went through it line by line before finalizing it, and thought it all made sense. Code is from https://www.w3schools.com/howto/howto_css_timeline.asp, which was recommended by the forums here, so I must have entered something wrong - otherwise, you'd have had this problem before.
/* CAMPAIGN TIMELINE */
* {box-sizing: border-box;}
body {background-color: #474e5d; font-family: Helvetica, sans-serif;}
.timeline {position: relative; max-width: 1200px; margin: 0 auto;}
.timeline::after {content: ''; position: absolute; width: 6px; background-color: white; top: 0; bottom: 0; left: 50%; margin-left: -3px;}
.container {padding: 10px 40px; position: relative; background-color: inherit; width: 50%;}
.container::after {content: ''; position: absolute; width: 25px; height: 25px; right: -17px; background-color: white; border: 4px solid #FF9F55; top: 15px; border-radius: 50%; z-index: 1;}
.left {left: 0;}
.right {left: 50%;}
.left::before {content: " "; height: 0; p-
thaenI think the issue is the ".letft" and ".right" global lines. OP already uses ".left" and ".right" classes in the layout, so these are going to cause issues if they aren't scoped. I'd suggest something like this (I added ".timeline " in front of the ".left" and ".right" lines. And also deleted the "*" and "body" lines as those will also affect your entire Campaign):
/* CAMPAIGN TIMELINE */
.timeline {position: relative; max-width: 1200px; margin: 0 auto;}
.timeline::after {content: ''; position: absolute; width: 6px; background-color: white; top: 0; bottom: 0; left: 50%; margin-left: -3px;}
.timeline .container {padding: 10px 40px; position: relative; background-color: inherit; width: 50%;}
.timeline .container::after {content: ''; position: absolute; width: 25px; height: 25px; right: -17px; background-color: white; border: 4px solid #FF9F55; top: 15px; border-radius: 50%; z-index: 1;}
.timeline .left {left: 0;}
.timeline .right {left: 50%;}
.timeline .left::before {content: " "; height: 0; position: absolute; top: 22px; width: 0; z-index: 1; right: 30px; border: medium solid white; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent white;}
.timeline .right::before {content: " "; height: 0; position: absolute; top: 22px; width: 0; z-index: 1; left: 30px; border: medium solid white; border-width: 10px 10px 10px 0; border-color: transparent white transparent transparent;}
.timeline .right::after {left: -16px;}
.timeline .content {padding: 20px 30px; background-color: white; position: relative; border-radius: 6px;}
@media screen and (max-width: 600px) { .timeline::after {left: 31px;}
.timeline .container {width: 100%; padding-left: 70px; padding-right: 25px;}
.timeline .container::before {left: 60px; border: medium solid white; border-width: 10px 10px 10px 0; border-color: transparent white transparent transparent;}
.timeline .left::after, .right::after {left: 15px;}
.timeline .right {left: 0%; }} - Write a comment
-
-
-
-
CommentJuly 5Here is a campaign that I think many will find some enjoyment reading. It's a first edition D&D (AD&D) campaign that has been played over 52 game sessions over 2 1/2 years. I've just added it to Obsidian Portal. Let me know what you think.
https://garygygaxtributecampaign.obsidianportal.com/
Campaign of the Month
August 2021
City of Splendors. Dungeon of Madness.
Read the feature post on the blog!
Or return to Obsidian Portal!
Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
