Creating horizontal breaks on a landing page

SOLVE
New Member

To preface, I'm not really a coder and only know the bare minimums of HTML. In any case, I'm trying to add horizontal rules to a landing page template to mimic an email template design I created. I want to do the hr in HTML rather than uploading a jpeg of the design. I got the lines to be the color and length that I want, but there's a big gap of space between them that I want to get rid of as I want them to stack on top of eachother. I've tried using padding and margin to adjust it, but that's not working (I may be using them incorrectly). In any case, I'd be very thankful for any help! 

 

Here's a jpeg of what I'm trying to acheive

Divider2.jpgA jpeg of the look I'm trying to acheive.

Here are screenshots of my HTML code and what it looks like when I run it:

Screen Shot 2017-10-26 at 12.24.02 PM.png

Screen Shot 2017-10-26 at 12.23.44 PM.png

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
HubSpot Product Team

Hi Kristi, 

 

You should be able to achieve this by adjusting the margin:

 

 

<hr style="border: 3px solid #aecdd1; margin-bottom: 0; width: 450px;">
<hr style="border: 3px solid #8d7429; margin-top: 0; width: 550px;">

If this doesn't stack them directly on top of each other, there may be other styles on your website affecting these.

 

Best,

Anthony

2 Replies 2
Highlighted
HubSpot Product Team

Hi Kristi, 

 

You should be able to achieve this by adjusting the margin:

 

 

<hr style="border: 3px solid #aecdd1; margin-bottom: 0; width: 450px;">
<hr style="border: 3px solid #8d7429; margin-top: 0; width: 550px;">

If this doesn't stack them directly on top of each other, there may be other styles on your website affecting these.

 

Best,

Anthony

New Member

THANK YOU!! I swear I tried this exact thing, but I guess not. It worked perfectly! Smiley Happy