Tee0101 Posted April 13, 2020 Share Posted April 13, 2020 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! Link to comment
tuanphan Posted April 13, 2020 Share Posted April 13, 2020 Can you share link to page where you use 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
JOHNMD Posted April 13, 2020 Share Posted April 13, 2020 (edited) 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 April 13, 2020 by JOHNMD mcgouran.john@gmail.com Link to comment
Praneetha Posted October 28, 2020 Share Posted October 28, 2020 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! Link to comment
tuanphan Posted October 28, 2020 Share Posted October 28, 2020 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
Praneetha Posted October 28, 2020 Share Posted October 28, 2020 Hi @tuanphan the code for the line is in a markdown on this page - https://www.calligrapran.com/custominvitations. Thanks! Link to comment
tuanphan Posted October 31, 2020 Share Posted October 31, 2020 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
Praneetha Posted November 2, 2020 Share Posted November 2, 2020 Hey @tuanphan it doesn't seem to work with modifying the length of the line, only how thick it is. I think the length is fine as is so don't worry about it! Link to comment
FlyingPig Posted May 9, 2021 Share Posted May 9, 2021 @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 Link to comment
tuanphan Posted May 9, 2021 Share Posted May 9, 2021 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment