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!