Anchor a vertical line to a Header

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!

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!

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

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!


 

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!


 

Is it the result you want to achieve?

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

@bangank36 I'm happy to lose the line,  would just like to try to get the header to sit above the text if possible, thanks for your help!

No line on mobile and keep it on desktop?

5 minutes ago, bangank36 said:

No line on mobile and keep it on desktop?

Yes please

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

@bangank36  thanks for this, frustratingly, the header refuses to sit above the body copy and looks like the attached.
Any further thoughts on how we might move 'What We Do' to the top?

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

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 🙂

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!

Hi @GBD, I know this post is a little dated by now... but I have a slightly different solution to this problem that doesn't involve code (as long as your Squarespace site is on 7.1 Fluid Engine)! 

Instead of adding vertical lines with code, you can upload a graphic of a vertical line on desktop view and then hide it behind an image or shape on mobile view (so that it doesn't show up). 

Also, now with Fluid Engine, it should be a lot easier to move your headers around and customize the mobile view layout within each section without needing to code.

✨ Here's a tutorial video explaining exactly how I go about this process:
https://www.luminescentdreams.com/tutorials/the-easiest-way-to-create-vertical-lines-in-squarespace-with-no-code 

Thanks so much & let me know if this helped!

Alyssa Parr
Squarespace Expert & CEO of Luminescent Dreams | Tutorials | Templates | Portfolio
👩‍💻 Hire me to build or edit your website: VIP Days | Custom Web Design
alyssa@luminescentdreams.com