How to create a vertical line in Weebly
Saturday August 24, 2013 | Comments
Step 1. Create your columns
Drag the "Multiple Columns" badge down to the page, and the click on "3" to create 3 columns.
Step 2. Add the Vertical Line HTML code
Drag the "Custom HTML" badge to the middle column.
Insert the following HTML code into the "Custom HTML" badge:
<div class="vertical-line" style="height: 500px;"></div>
Note: Change this number to make your vertical line longer or shorter: style="height: 500px;"
Step 3. Add the Vertical Line CSS code
Click on Design at the top, and then click on Edit HTML/CSS on the right of the page.
Click on main-style.css in the column on the left.
Scroll all the way to the bottom of the CSS Style Sheet and add the following code:
When you've added the code, click save
You're done! Publish your site
to see how your vertical line looks!
Tips & Additional Information
- Your vertical line will naturally reside in the center of its location. If you want the line to move to the right or the left, simply swap these HTML Codes out for the desired result.