Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Changing the width of the horizontal line


Tee0101

Question

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 post
  • Answers 9
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

9 answers to this question

Recommended Posts

  • 0

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>

Edited by JOHNMD

mcgouran.john@gmail.com

Link to post
  • 0
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?

Link to post
  • 0
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>

 

Link to post
  • 0
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.

 

 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...