Solved

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

benkwuo
Tourist
6 1 0

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. 

benkwuo_2-1709693394489.png

 

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

Accepted Solutions (2)

ThePrimeWeb
Shopify Partner
2095 602 470

This is an 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>

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

namphan
Shopify Partner
206 31 47

This is an accepted solution.

Hi @benkwuo,

Please change <hr> =>

<div class="page-width"><hr></div>
Shopify Development Service

View solution in original post

Replies 3 (3)

ThePrimeWeb
Shopify Partner
2095 602 470

This is an 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>

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
benkwuo
Tourist
6 1 0

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
Shopify Partner
206 31 47

This is an accepted solution.

Hi @benkwuo,

Please change <hr> =>

<div class="page-width"><hr></div>
Shopify Development Service