CMS Development

KristiM
Member

Creating horizontal breaks on a landing page

SOLVE

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

A jpeg of the look I'm trying to acheive.A 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

0 Upvotes
1 Accepted solution
anthonypizzurro
Solution
HubSpot Product Team
HubSpot Product Team

Creating horizontal breaks on a landing page

SOLVE

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

View solution in original post

2 Replies 2
anthonypizzurro
Solution
HubSpot Product Team
HubSpot Product Team

Creating horizontal breaks on a landing page

SOLVE

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

KristiM
Member

Creating horizontal breaks on a landing page

SOLVE

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