Alexis-Reid-Design Posted March 29, 2021 Share Posted March 29, 2021 (edited) Site URL: https://lspff.org/about-2 This custom code for a timeline was working last week, but has stopped working on Chrome, but still works in all other browsers, including Incognito mode in Chrome? You use quote blocks to add each timeline piece. <script src="https://drive.google.com/uc?export=view&id=1iBS8Jg9Ty5bjY_5QllDLxcNH0EkcrJto"></script> <script src="https://drive.google.com/uc?export=view&id=1TRYODB131CM86wLA5rYNgCwB8xEjM-Va"></script> <style type="text/css"> .sqs-block-quote blockquote {overflow:hidden;} .sqs-block-quote blockquote span, .quote-block figcaption::first-letter, .quote-block .source::first-letter {display: none !important;} .quote-block {color:inherit;font-size: inherit;} /* Header */ .quote-block h1 {color:inherit;font-size: inherit;margin: 10px 0 0;} /* Image */ .quote-block img {max-width: 100%;margin: 15px 0;} /* Date */ .quote-block.sqs-block-quote figcaption {font-size: 11px;font-weight: 500;} /* Link */ .quote-block a {color: inherit;font-size: inherit;text-decoration: none;padding-bottom: 1px;background-image: -webkit-gradient(linear,left top,left bottom,from(#1c1c1c),to(#1c1c1c));background-image: -o-linear-gradient(#1c1c1c 0%,#1c1c1c 100%);background-image: linear-gradient(#1c1c1c 0%,#1c1c1c 100%);background-repeat: no-repeat;background-size: 100% 1px;background-position: 0 bottom;-webkit-transition: opacity 700ms cubic-bezier(.694,0,.335,1),background-position 100ms cubic-bezier(.694,0,.335,1);-o-transition: opacity 700ms cubic-bezier(.694,0,.335,1),background-position 100ms cubic-bezier(.694,0,.335,1);transition: opacity 700ms cubic-bezier(.694,0,.335,1),background-position 100ms cubic-bezier(.694,0,.335,1);} /* Link Hover */ .quote-block a:hover {background-position: center bottom 3px;} .sqs-block-quote figure {display: flex;flex-direction: column;margin: 0 3px;} .sqs-block-quote blockquote {order: 2;margin: 4px;} .sqs-block-quote figcaption {order: 1;} body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(even) .quote-block blockquote, body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(even) .quote-block figcaption {text-align: left;} body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block blockquote, body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block figcaption {text-align: right;} body:not(.sqs-edit-mode-active) .quote-block figcaption {padding: 0;margin: 0 0 10px 0;line-height: initial !important;} .quote-block figcaption::first-letter {visibility: hidden;font-size: 0;} body:not(.sqs-edit-mode-active) .quote-block.sqs-block {list-style-type: none;position: relative;width: .5px !important;margin: 0 auto;padding: 0 0 50px !important;background: #cccccc;} body:not(.sqs-edit-mode-active) .quote-block::after {content: '';position: absolute;left: 50%;top: 50%;transform: translateX(-50%);width: 10px;height: 10px;border-radius: 50%;background: inherit;} body:not(.sqs-edit-mode-active) .col .timeline-event:first-child .quote-block::after {top: 0;} body:not(.sqs-edit-mode-active) .col .timeline-event:last-child .quote-block::after {bottom: 0;top: unset;} body:not(.sqs-edit-mode-active) .col .timeline-event .quote-block .sqs-block-content {position: relative;bottom: 0px;width: 400px;visibility: hidden;opacity: 0;transition: all .5s ease-in-out;padding: 0;} body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(even) .quote-block .sqs-block-content {left: 45px;} body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block div {left: -445px;} body:not(.sqs-edit-mode-active) .quote-block::after {background: #ffffff;} body:not(.sqs-edit-mode-active) .quote-block.in-view::after {border: 1px solid #cccccc;} body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(even) .quote-block .sqs-block-content {transform: translate3d(200px,0,0);} body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block .sqs-block-content {transform: translate3d(-200px,0,0);} body:not(.sqs-edit-mode-active) .col .timeline-event .quote-block.in-view .sqs-block-content {transform: none;visibility: visible;opacity: 1;} .quote-block iframe {max-width: 100% !important;} @media screen and (max-width: 992px) { body:not(.sqs-edit-mode-active) .col .timeline-event .quote-block .sqs-block-content {width: 250px;} body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block .sqs-block-content {left: -289px;} } @media screen and (max-width: 600px) { body:not(.sqs-edit-mode-active) .quote-block .sqs-block-content {transform:none !important;} body:not(.sqs-edit-mode-active) .quote-block {margin-left: 20px !important;} body:not(.sqs-edit-mode-active) .quote-block .sqs-block-content {width: calc(100vw - 91px);} body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block .sqs-block-content {left: 45px;} body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block blockquote, body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block figcaption {text-align: left;} body:not(.sqs-edit-mode-active) .quote-block::after {top: 0;} } </style> Edited March 30, 2021 by Alexis-Reid-Design adding a clarification Link to comment
creedon Posted March 30, 2021 Share Posted March 30, 2021 When you say it stopped working on Chrome but works in incognito. Does that mean you are in Preview and the effect is not working? It looks like there are a bunch selectors (body:not(.sqs-edit-mode-active)) to prevent it from working in Preview. Probably because the effect would interfere with editing the site. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Alexis-Reid-Design Posted March 30, 2021 Author Share Posted March 30, 2021 No, on the live site it's not working. When you go to lspff.org/about, does it show up for you on Chrome? This is what it looks like for me and others on my team—attached. Link to comment
tuanphan Posted March 31, 2021 Share Posted March 31, 2021 On 3/30/2021 at 11:37 AM, Alexis-Reid-Design said: No, on the live site it's not working. When you go to lspff.org/about, does it show up for you on Chrome? This is what it looks like for me and others on my team—attached. Hi. I don't see timeline in https://www.lspff.org/about Can you share link to exact page? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
creedon Posted March 31, 2021 Share Posted March 31, 2021 Quote When you go to lspff.org/about, does it show up for you on Chrome? This is what I see on Chrome. Just a portion of the actual page. Everything looked good to me. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
lukedesigner Posted March 31, 2021 Share Posted March 31, 2021 Hi! Did you resolve this? I have this same problem on a website too 🤷♂️ Thank you! Link to comment
creedon Posted April 1, 2021 Share Posted April 1, 2021 3 hours ago, lukedesigner said: I have this same problem on a website too Please post the URL for your site. If your site is not public please set up a site-wide password, if you've not already done so. Post the password here. Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works. We can then take a look at your issue. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Swebberdesign Posted April 1, 2021 Share Posted April 1, 2021 I'm having the same problem. Can you look at mine too? eduard-slinin.squarespace.com password: working Thanks! Link to comment
tuanphan Posted April 5, 2021 Share Posted April 5, 2021 On 4/2/2021 at 5:54 AM, Swebberdesign said: I'm having the same problem. Can you look at mine too? eduard-slinin.squarespace.com password: working Thanks! Hi. I see it works here. Dell/Chrome Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
creedon Posted April 5, 2021 Share Posted April 5, 2021 @Swebberdesign Looks good here as well. On macOS/Chrome. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Alexis-Reid-Design Posted April 14, 2021 Author Share Posted April 14, 2021 Thank you @tuanphan and @creedon! I think we were all using code from Squarepaste, and they have since resolved the issue! Link to comment
NZ-Fries Posted April 16, 2021 Share Posted April 16, 2021 @Alexis-Reid-Design I am having the same issue. How did you resolve this?@creedon https://www.friesfinancialgroup.com/about-us Link to comment
creedon Posted April 16, 2021 Share Posted April 16, 2021 @NZ-Fries Seems OK here. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
NZ-Fries Posted April 16, 2021 Share Posted April 16, 2021 @creedonSince the site is live and the section was blank I removed the transitions animations and adjusted the opacity to 100% for the content. If you reference the code is seems there are errors connecting to the moment js and that seems to be causing the issue. 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