Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Squarepaste Timeline - how to reduce the margins on the left and right of timeline


BrownKatUK

Question

Site URL: https://triangle-keyboard-t5hz.squarespace.com/history

Hi - I purchased the timeline plugin from @squarepaste and it is working well except on smaller Ipad-size screens where the text is running off the left and right sides and hence not readable and at the same time the spacing on either side of the timeline is too big. I can't seem to get ahold of anyone at Squarepaste which isn't great and I think it's a pretty easy fix but I don't want to go messing with their code... what I want to do is reduce the space on either side of the time line and make the whole thing more responsive on Ipads. It works great on a regular desktop and on mobile. Thank you!

Site above. Password WLAC

 

Link to comment

9 answers to this question

Recommended Posts

  • 1
13 hours ago, BrownKatUK said:

Site URL: https://triangle-keyboard-t5hz.squarespace.com/history

Hi - I purchased the timeline plugin from @squarepaste and it is working well except on smaller Ipad-size screens where the text is running off the left and right sides and hence not readable and at the same time the spacing on either side of the timeline is too big. I can't seem to get ahold of anyone at Squarepaste which isn't great and I think it's a pretty easy fix but I don't want to go messing with their code... what I want to do is reduce the space on either side of the time line and make the whole thing more responsive on Ipads. It works great on a regular desktop and on mobile. Thank you!

Site above. Password WLAC

 

Wonder if you have tried to contact the developer, they should have post-sale channel support.

Anyway I looked at your site and suggest solution like so

@media screen and (min-width: 640px) and (max-width: 1200px) {
  body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block .sqs-block-content {
    transform: translate3d(0,0,0);
}
  body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(even) .quote-block .sqs-block-content {
    transform: translate3d(0,0,0);
}
}

image.thumb.png.54a605e5474780200faa31ec5dd75431.png

 

PS: You have more than one jquery instance on the site, try to remove all other jquery script (like jquery-3.4.1.min.js...). and only place 01 jquery snippet on the very top of header injection. I saw the base-jquery of Squarepaste, you can leave it at the very top remove other instance (from what I can see, instance of ixstudio and WM script - will mayer I assume)

image.png.d8ca6e6cc8f55fe437432dd95dfb5d75.png

image.png.319bf8141c06d3091a30345a82c46125.png

Greeting, it's BaNgan from 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, Youtube Gallery for Squarespace
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
  • 0

@bangank36 thank you so much for your help with the timeline. That worked!

RE: the jquery suggestion. Would I do this in the settings / advanced / code-injection and do you suggest moving line 3 in the header (<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>) to the top and removing line 3 in the footer <script src="https://code.jquery.com/jquery-3.5.1.js"></script> all together? Just want to understand so I don't mess it up! Thank you again

Screenshot 2021-07-21 at 12.13.31.png

Link to comment
  • 0
9 minutes ago, BrownKatUK said:

@bangank36 thank you so much for your help with the timeline. That worked!

RE: the jquery suggestion. Would I do this in the settings / advanced / code-injection and do you suggest moving line 3 in the header (<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>) to the top and removing line 3 in the footer <script src="https://code.jquery.com/jquery-3.5.1.js"></script> all together? Just want to understand so I don't mess it up! Thank you again

Screenshot 2021-07-21 at 12.13.31.png

Leave header as it is and remove line and 3 in footer, i also saw jquery-base on squarepaste, did you used it too? If yes, remove it as well

Greeting, it's BaNgan from 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, Youtube Gallery for Squarespace
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
  • 0
On 7/20/2021 at 9:27 PM, BrownKatUK said:

Site URL: https://triangle-keyboard-t5hz.squarespace.com/history

Hi - I purchased the timeline plugin from @squarepaste and it is working well except on smaller Ipad-size screens where the text is running off the left and right sides and hence not readable and at the same time the spacing on either side of the timeline is too big. I can't seem to get ahold of anyone at Squarepaste which isn't great and I think it's a pretty easy fix but I don't want to go messing with their code... what I want to do is reduce the space on either side of the time line and make the whole thing more responsive on Ipads. It works great on a regular desktop and on mobile. Thank you!

Site above. Password WLAC

 

See some other problems. Do you need to help with these?

Site URL – https://triangle-keyboard-t5hz.squarespace.com/?password=WLAC

1. (Desktop – Trustees) Reduce space?

https://triangle-keyboard-t5hz.squarespace.com/trustees/?password=WLAC

triangle-keyboard-t5hz.squarespace.com-0

2. (Desktop – History) Reduce space between text and vertical lines?

https://triangle-keyboard-t5hz.squarespace.com/history/?password=WLAC

triangle-keyboard-t5hz.squarespace.com-0

3. (Mobile/Tablet – Homepage) On desktop, the entire image can be seen. On mobile, the image is partially cropped.

https://triangle-keyboard-t5hz.squarespace.com/?password=WLAC

triangle-keyboard-t5hz.squarespace.com-0

4. (Mobile – Footer) Social icons are skewed to the right.

https://triangle-keyboard-t5hz.squarespace.com/?password=WLAC

triangle-keyboard-t5hz.squarespace.com-0

5. (Tablet – Homepage) Increase content width?

https://triangle-keyboard-t5hz.squarespace.com/?password=WLAC

triangle-keyboard-t5hz.squarespace.com-0

6. (Tablet – Footer) Social icons are cut into 2 lines.

https://triangle-keyboard-t5hz.squarespace.com/?password=WLAC

triangle-keyboard-t5hz.squarespace.com-0

7. (Tablet – Homepage) Reduce space?

https://triangle-keyboard-t5hz.squarespace.com/?password=WLAC

triangle-keyboard-t5hz.squarespace.com-0

8. (Tablet – Trustees) Text break.

https://triangle-keyboard-t5hz.squarespace.com/trustees/?password=WLAC

triangle-keyboard-t5hz.squarespace.com-0

9. (Tablet – History) Scroll bar at the bottom of page.

https://triangle-keyboard-t5hz.squarespace.com/history/?password=WLAC

triangle-keyboard-t5hz.squarespace.com-0

10. (Tablet – Team) Increase text width?

https://triangle-keyboard-t5hz.squarespace.com/team/?password=WLAC

triangle-keyboard-t5hz.squarespace.com-1

11. (Tablet – Contact) Email is cut into 2 lines.

https://triangle-keyboard-t5hz.squarespace.com/contact/?password=WLAC

triangle-keyboard-t5hz.squarespace.com-1

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0

@tuanphan Thank you again for once  again coming to the rescue and having a good look through the site for where it could be improved.

1. Trustees - fine with this.

2. Yes, reducing the space between text and vertical lines would be great. 

2b. I also added text to make sure the text did not run off the left and right side and that seemed to stop working as well when viewed Incognito but on the CSS page it works great.

@media screen and (min-width: 640px) and (max-width: 1200px) {
  body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block .sqs-block-content {
    transform: translate3d(0,0,0);
}
  body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(even) .quote-block .sqs-block-content {
    transform: translate3d(0,0,0);
}
}

3. This one I thought I had solved by using the following code in CSS. When I view in the CSS window it looks great but then it seems to stop working. I don't think it likes the opacity I've added to the end of #f2f2f2. When I remove that it seems to work although it blocks out the image completely.

// main image mobile //
@media (max-width:640px) {
  [data-section-id="609aa62a18656e56660631b2"] .content-wrapper {
    padding-top: 0px;
    padding-bottom: 0px;
    background-color: #f2f2f260;
    margin: 6.6vmax;
    }}

4.  Yes if the FAQ / Resources and Contacts could be centred and also the social media links that would be great.

5. Yes, increasing the width of the summary boxes on tablet would be great.

6. Yes, stopping the left hand text and right hand icons from cutting into two lines would also be ideal.

7. Yes to reducing the space around the home page quote on tablet.

8. Yes, for improving the way the text breaks on tablet. Maybe getting it to stack?

9. Yes, I think a scroll bar at bottom of this page would be a good idea.

10. I think this is okay as is.

11. I fixed this - thanks for pointing it out.

Thank you again!!!

Link to comment
  • 0
On 7/27/2021 at 8:19 PM, BrownKatUK said:

@tuanphan Thank you again for once  again coming to the rescue and having a good look through the site for where it could be improved.

1. Trustees - fine with this.

2. Yes, reducing the space between text and vertical lines would be great. 

2b. I also added text to make sure the text did not run off the left and right side and that seemed to stop working as well when viewed Incognito but on the CSS page it works great.

@media screen and (min-width: 640px) and (max-width: 1200px) {
  body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(odd) .quote-block .sqs-block-content {
    transform: translate3d(0,0,0);
}
  body:not(.sqs-edit-mode-active) .col .timeline-event:nth-child(even) .quote-block .sqs-block-content {
    transform: translate3d(0,0,0);
}
}

3. This one I thought I had solved by using the following code in CSS. When I view in the CSS window it looks great but then it seems to stop working. I don't think it likes the opacity I've added to the end of #f2f2f2. When I remove that it seems to work although it blocks out the image completely.

// main image mobile //
@media (max-width:640px) {
  [data-section-id="609aa62a18656e56660631b2"] .content-wrapper {
    padding-top: 0px;
    padding-bottom: 0px;
    background-color: #f2f2f260;
    margin: 6.6vmax;
    }}

4.  Yes if the FAQ / Resources and Contacts could be centred and also the social media links that would be great.

5. Yes, increasing the width of the summary boxes on tablet would be great.

6. Yes, stopping the left hand text and right hand icons from cutting into two lines would also be ideal.

7. Yes to reducing the space around the home page quote on tablet.

8. Yes, for improving the way the text breaks on tablet. Maybe getting it to stack?

9. Yes, I think a scroll bar at bottom of this page would be a good idea.

10. I think this is okay as is.

11. I fixed this - thanks for pointing it out.

Thank you again!!!

Q2. Try adding to Design > Custom CSS

/* Timeline - Spacing line-text */
@media screen and (min-width:992px) {
.timeline-event:nth-child(2n+2) figure {
    position: relative;
    left: -150px !important;
}
.timeline-event:nth-child(2n+3) figure {
    position: relative;
    right: -150px;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
On 8/2/2021 at 11:19 PM, BrownKatUK said:

@tuanphan Thank you so much for the above. I've made both changes and am very pleased with the result.

Sent you a forum message. You can check.

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

Create an account or sign in to comment

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

×
×
  • Create New...