I would like to add a horizontal line via custom liquid (Dawn)

[benkwuo]

Like the subject says, I would like to add horizontal lines via custom liquid. I am aware of the <hr> element, but I don't want the line to span the entire length of the page, I would like to span the same length as the page width. I also know that there are media queries to change the format of the page as the screen size gets smaller so I think there would need to be some modification via that as well. I would also like to add <h2> element above the <hr> line. I have tried altering the border-bottom: of the h2 element to get a similar effect, but then the other components of the page that have <h2> also added the extra line. 

For example, with the full screen view, you can see that the "Key Contents" and <hr> line span the entire screen, I would like it to align with the cloud combo container on the left. Where I marked the blue lines is where I would like the <hr> to start and finish. And the first blue line is where I would like my <h2> test to stay regardless of screen size. Please and thank you

[ThePrimeWeb · Accepted solution]

Can you provide the full code you added to the custom liquid section?

Along with the link to your store as well. Thanks!

I can rewrite the code for you, but you can use the page-width class to automatically align it.

Something like

<div class="page-width">
   <h2>Key Contents</h2>
   <hr>
</div>

[ThePrimeWeb · Accepted solution]

Can you provide the full code you added to the custom liquid section?

Along with the link to your store as well. Thanks!

I can rewrite the code for you, but you can use the page-width class to automatically align it.

Something like

<div class="page-width">
   <h2>Key Contents</h2>
   <hr>
</div>

[benkwuo]

Thank you so much, this is exactly what I was looking for. I can't believe I was aware of the page-width too

[namphan · Accepted solution]

Hi @benkwuo,

Please change <hr> =>

<div class="page-width"><hr></div>