[pcomptoniwireParticipant]

I’m trying to design a one page scrolling site that walks the visitor through a timeline of a day.
The lines in the center will be broken up by a clock icon and a sort statement.

The way I’m currently doing it is by applying a border on the right side of the left column. The problem is, as I write content, the vertical line gets separated from the bottom of the clock because of the size of the paragraph I’m writing..

It also look bad in responsive. Can you offer some assistance for me? Here’s a screencast of what I’m talking about, I’m building this locally, so there’s no admin/password I can give.

Should the section be broken into rows with multiple columns, or just one column?

Thanks I appreciate it.

[Rue NelModerator]

Hello There,

Thanks for writing in! Regretfully this isn’t a feature offered by X that you can create a timeline. It could be possible with custom development, but this would be outside the scope of support we can offer. Perhaps a 3rd party plugins could help you achieve what you have in mind. These plugins might help you:
https://wordpress.org/plugins/timeline-express/
https://wordpress.org/plugins/tags/timeline

Thanks for understanding. Take care!

[pcomptoniwireParticipant]

I don’t need to “make” a timeline. All I need is to be able to make vertical line that will stay in the center of the screen no matter how the visitor is viewing the site. Whether it’s mobile or not.

Then I need the ability to alternate the color of this vertical line depending on what section it’s in.

Then make classes for a line that is white, and a different class for a line that is black.

Are you saying there’s no way to make a vertical line using CSS in X?

So, I need CSS that will make a 2px vertical line that will stay in the center of the screen on responsive.

[pcomptoniwireParticipant]

I got it figured out. I worked on this all day yesterday. I just couldn’t make it work properly with repsonsive..In the end it’s pretty simple. Here it is if someone else needs it.

1. make a row in cornerstone.
2. From your selector, place the RAW CONTENT in the row.

Place this code:

<div class='page'>
  <div class='left-col'>
    Content in the left column
  </div>
  <div class='right-col'>
    Content in the right column
  </div>
</div>

In the Customizer go to custom and put this in the CSS area.

.left-col {
  width: 50%;
  min-height: 250px;
  border-right: 1px solid white;
  float: left;
  box-sizing: border-box;
}

.right-col {
  width: 50%;
  min-height: 150px;
  float: right;
}

Now, you’ll see “Content in the left Column” and “Content in the right column” that text is in teh first <div> tags that you placed in the Raw Content. You can simply delete it. Now, feel free to go a background image, or left, right columns. whatever.

If you want 2 lines with a gap in the middle, just make 3 rows, place this code in row 1 and row 3 ..Row 2 will be your gap or filled with whatever you’d like.

[JadeModerator]

Thanks for sharing your solution 🙂

[Author]

Posts