Jump to content

Changing the width of the horizontal line

Recommended Posts

I need help changing the width of my horizontal line on my index pages. When i use the CSS code below:

.sqs-block-content hr {
 margin-left: 0;
 border-style: none;
 height: 1px;
 width: 200%;
}

The line only expands from the right off the page, and doesn't expand on the left side. I tried changing the margin as you can see in the code above, but the line still wont move over. What else should i be doing? I am using the Sofia template, attached is a screenshot of the line running off my page.

 

Thanks!

Screen Shot 2020-04-12 at 11.44.38 PM.png

Link to comment
  • Replies 9
  • Views 4.7k
  • Created
  • Last Reply

One option is to replace your line block with a Code Block on the page and the use the following code (you can adjust the line length (width)  in % , for example to 50%,  and change the thickness and line color in the code):

<style>
hr.line {
  border-top: 1px solid light-gray;
  width: 75%;
}
</style>
<body>
<hr class="line"> 
</body>

mcgouran.john@gmail.com

Link to comment
  • 6 months later...
11 hours ago, Praneetha said:

Hey @JOHNMD thanks for the code! This seems to work but I'm not able to adjust the width. Any chance you can help with that? My website is calligrapran.com. Thanks!

Where is horizontal line?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 10/28/2020 at 9:10 PM, Praneetha said:

Hi @tuanphan the code for the line is in a markdown on this page - https://www.calligrapran.com/custominvitations. Thanks!

You mean Take the next step line?

edit to this

<style>
hr.line {
    border: 3px solid lightgray;
    width: 63%;
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 6 months later...
2 hours ago, FlyingPig said:

@Praneetha would you mind sharing the code you used for your accordion with the boxes on the site you listed above, https://www.calligrapran.com/custominvitations , that looks really nice and is exactly what we are trying to get.  Thanks

 

They used free code. If you search Google: accordion squarespace, you will see the result in page 1.

Or you can use this accordion plugin, easy to install, more customization.

 

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.