Jump to content

Anchor a vertical line to a Header

Recommended Posts

I'm trying to anchor a vertical line to the left of my headers so that they are responsive - does anyone know if this is possible?

So far, I've created a verticle line using CSS but am struggling to align it to the baseline of the text and to 'anchor' it to the text so that when viewed on mobile they stay together and be above the body copy.

Currently, when you view at mobile size the header falls below all content and falls off the left of the page (because I reduced the padding to bring the copy closer to the line), and the line is above the header. (2nd screenshot)

Have attached a screenshot of what I've managed to do so far.

Thanks so much in advance!

Screenshot 2022-05-11 at 15.36.12.png

Screenshot 2022-05-11 at 15.46.25.png

Edited by GBD
Link to comment
1 hour ago, GBD said:

Site URL: https://fuchsia-burgundy-n6es.squarespace.com

I'm trying to anchor a vertical line to the left of my headers so that they are responsive - does anyone know if this is possible?

So far, I've created a verticle line using CSS but am struggling to align it to the baseline of the text and to 'anchor' it to the text so that when viewed on mobile they stay together and be above the body copy.

Have attached a screenshot of what I've managed to do so far.

Password: TCC_2022

Thanks so much in advance!

Screenshot 2022-05-11 at 15.36.12.png

You can try the following one to set the vertical line

div#block-91b610d86bb92b5df064 h1:after {
  content:'';
  width: 3px;
  height: 70%;
  display: block;
  position: absolute;
  background: red;
  bottom: 0;
  left: -101px;
}

@media only screen and (max-width: 767px) {
  div#block-91b610d86bb92b5df064 h1 {
    margin: 0 auto !important;
    position: relative;
  }
}

Let me know how it works

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
16 hours ago, bangank36 said:

You can try the following one to set the vertical line

div#block-91b610d86bb92b5df064 h1:after {
  content:'';
  width: 3px;
  height: 70%;
  display: block;
  position: absolute;
  background: red;
  bottom: 0;
  left: -101px;
}

@media only screen and (max-width: 767px) {
  div#block-91b610d86bb92b5df064 h1 {
    margin: 0 auto !important;
    position: relative;
  }
}

Let me know how it works

Thanks so much @bangank36 this is much tidier solution! Thank you!
The line is hidden on mobile - was this the intention? If so this shouldn't too much of a problem.

Do you have any solution for ensuring the header blocks - that are on the right of the paragraph blocks - sit above the paragraph blocks when viewed on mobile & tablet?

Have attached an image of what is happening.

Thank you again for your help!


 

Screenshot 2022-05-12 at 10.04.09.png

Link to comment
5 hours ago, GBD said:

Thanks so much @bangank36 this is much tidier solution! Thank you!
The line is hidden on mobile - was this the intention? If so this shouldn't too much of a problem.

Do you have any solution for ensuring the header blocks - that are on the right of the paragraph blocks - sit above the paragraph blocks when viewed on mobile & tablet?

Have attached an image of what is happening.

Thank you again for your help!


 

Screenshot 2022-05-12 at 10.04.09.png

Is it the result you want to achieve?

image.thumb.png.07252831f2f5f4a272dde56f16df6275.png

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Try the following code

@media only screen and (max-width: 767px){
  div#block-91b610d86bb92b5df064 h1:after  {
    content: unset;
  }
  section[data-section-id="62724d96febd5f2e8f351fb6"] .sqs-layout > .row {
    flex-direction: row;
    display: flex;
  }
}

Let me know how it goes

Edited by bangank36
no line and header on the right on mobile

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

No line on mobile and keep it on desktop?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

you can try the new code i 've just updated in the following reply

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

which device you are ussing? tablet or high resolution device? may be you can try changing the breakpoint on my code from 767px to 1023px to fit it with the tablet also

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
3 minutes ago, bangank36 said:

which device you are ussing? tablet or high resolution device? may be you can try changing the breakpoint on my code from 767px to 1023px to fit it with the tablet also

I'm using a Macbook Pro to build, iPhone for testing - not yet tested on tablet 🙂

Link to comment
20 hours ago, GBD said:

I'm using a Macbook Pro to build, iPhone for testing - not yet tested on tablet 🙂

Just an update, I managed to find a fix to place the header above the copy using the code below:

 

//Reverse block order on mobile//

section[data-section-id="00000000000000000000"] {

.content-wrapper {

   padding-top: 0!important;

}

@media screen and (max-width: 767px) {

  .sqs-row {

    display: flex;

    flex-direction: column-reverse;

  }

}

}

Thanks for all of your help!

Link to comment

Create an account or sign in to comment

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

×
×
  • 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.