Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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>
This is an accepted solution.
Hi @benkwuo,
Please change <hr> =>
<div class="page-width"><hr></div>
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>
Thank you so much, this is exactly what I was looking for. I can't believe I was aware of the page-width too
This is an accepted solution.
Hi @benkwuo,
Please change <hr> =>
<div class="page-width"><hr></div>
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025