GBD Posted May 11, 2022 Share Posted May 11, 2022 (edited) 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! Edited May 13, 2022 by GBD Link to comment
Beyondspace Posted May 11, 2022 Share Posted May 11, 2022 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 GBD 1 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 HighlighterIf 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
GBD Posted May 12, 2022 Author Share Posted May 12, 2022 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! Link to comment
Beyondspace Posted May 12, 2022 Share Posted May 12, 2022 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? 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 HighlighterIf 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
Beyondspace Posted May 12, 2022 Share Posted May 12, 2022 (edited) 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 May 12, 2022 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 HighlighterIf 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
GBD Posted May 12, 2022 Author Share Posted May 12, 2022 (edited) @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! Edited May 12, 2022 by GBD Link to comment
Beyondspace Posted May 12, 2022 Share Posted May 12, 2022 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 HighlighterIf 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
GBD Posted May 12, 2022 Author Share Posted May 12, 2022 5 minutes ago, bangank36 said: No line on mobile and keep it on desktop? Yes please Link to comment
Beyondspace Posted May 12, 2022 Share Posted May 12, 2022 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 HighlighterIf 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
GBD Posted May 12, 2022 Author Share Posted May 12, 2022 @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? Link to comment
Beyondspace Posted May 12, 2022 Share Posted May 12, 2022 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 HighlighterIf 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
GBD Posted May 12, 2022 Author Share Posted May 12, 2022 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
GBD Posted May 13, 2022 Author Share Posted May 13, 2022 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! tuanphan 1 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