Timeline Block Margins

This topic is: resolved

Tagged: 

This topic contains 10 replies, has 2 voices, and was last updated by  Kari Sharp 9 years, 1 month ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • March 31, 2015 at 1:55 pm #4081

    Kari Sharp
    Participant
    Post count: 8

    Hi Evan —

    Thank you so much for your plug-in. I really love how beautiful it looks!

    I am a developer and have done a fair amount of CSS customization to your plug-in on this page: http://getsharpdev.com/bkstrength/evolution/. My client is wondering if there was a way to tighten up the spacing between the timeline masonry blocks so as not to have such large gaps of white space between the items. To tighten up the spacing, I changed the margins with this CSS code:

    .cd-timeline-block {
    margin: -7.5em 0 !important;
    }

    However, it seems that maybe because the blocks are not all the same size, the spacing is not the same between each of them the way a masonry grid would work. Is there a way to add the bottom margin to the dynamic height of the box so that the spacing is the same (about 50px) between each timeline block?

    Additionally, she would like the right column of the timeline to start only about 100px below the top of where the left column so as to not have all the white space at the top of the right column. Is there a way to alter where the top of the right column starts?

    Thank you so much for your help!
    Kari

    March 31, 2015 at 2:34 pm #4082

    Evan Herman
    Keymaster
    Post count: 568

    Hi Kari,

    Thanks so much for the kind words, I’m very glad you’re enjoying Timeline Express and finding it useful. Might I say, that you’re timeline is probably one of the nicest implementations I’ve seen to date, great job!

    In regards to your support requests, you’ll notice that each timeline block is set to 100% width of the container. Thus why setting the top margin to -Xem value works. This causes each of the containers to overlap one another, in a way making it not a true implementation of masonry.

    I believe that I have a somewhat reasonable solution to ensure that the content blocks are 50% of the container and actually stack on top of each other, the way masonry should. This way, the distance between each container is uniform regardless of the container size.

    Give me a little bit and I’ll see what I can come up with. If it’s somewhat of a reasonable solution that helps resolve issues, I’ll push out an update to the repository. That may or may not fix the issue of the second item in the timeline having such a large amount of white space above it.

    Thanks,
    Evan

    • This reply was modified 9 years, 1 month ago by  Evan Herman.
    March 31, 2015 at 2:47 pm #4084

    Kari Sharp
    Participant
    Post count: 8

    Hi Evan —

    Thank you so much! I appreciate your quick response and look forward to your solution.

    Kari

    March 31, 2015 at 3:55 pm #4085

    Evan Herman
    Keymaster
    Post count: 568

    Hey again Kari,

    After a bit of tinkering, I believe I’ve come up with a very reasonable solution. I’m just in the midst of pushing out the patch to the WordPress repository.

    It’s going to be tagged v 1.1.6.5. I’ve re-wrote part of the CSS file to properly support the native masonry layout. I’ve also repaired a few other minor issues. Go ahead and update and let me know if things are working a bit better on your end.

    Thanks again,
    Evan

    March 31, 2015 at 4:41 pm #4086

    Kari Sharp
    Participant
    Post count: 8

    Hi Evan —

    I ran the update and the spacing does appear to be consistent now. As you can see, the layout is now a little messed up. I will look through and see what of my own changes may be causing this. If you see anything that is the result of the changes that you have made, please let me know.

    Thanks!
    Kari

    March 31, 2015 at 4:48 pm #4087

    Kari Sharp
    Participant
    Post count: 8

    I think it’s working!! Check it out!!

    March 31, 2015 at 5:09 pm #4092

    Evan Herman
    Keymaster
    Post count: 568

    Hi Kari,

    Everything looks great on my end! The icons don’t seem to be visible on the timeline. Did you remove those , or did that occur from the update?

    Things look a lot better when they are uniform 😉

    Best,
    Evan

    April 1, 2015 at 1:04 pm #4097

    Kari Sharp
    Participant
    Post count: 8

    Hi Evan —

    Yes, you’re right, the icons are not lining up properly with your update. They now need to be positioned using nth-child(even/odd) (I think) and were hiding under the blocks. I did position them using the following code, but that did not work for all screen sizes (and before your update, the icons were positioning properly without any additional code, even with all the CSS changes I had made). I added the position for the icons to each different screen size (I have about 5 breaks – also used for other things). If you could fix the positioning of the icons, that would be great (because I don’t think it’s working properly even without all my CSS changes, but did not confirm that)!

    .cd-timeline-block:nth-child(odd) .cd-timeline-img {
    left: 100% !important;
    }

    .cd-timeline-block:nth-child(even) .cd-timeline-img {
    left: 0 !important;
    }

    If you want to check it out again now… I think it looks really nice and is accomplishing everything that the client wanted. She is very happy with it. http://getsharpdev.com/bkstrength/evolution/

    Thank you again so much for doing this. I so appreciate it and also appreciate your quick response.

    Thanks,
    Kari

    April 3, 2015 at 10:36 am #4110

    Kari Sharp
    Participant
    Post count: 8

    Hi Evan —

    Did you release another update to the plug-in with significant changes? I had everything ready to go and now it’s all out of whack and the spacing is not the tight masonry spacing that you had fixed in the previous version. Can you help again?

    Thanks,
    Kari

    April 3, 2015 at 12:13 pm #4111

    Evan Herman
    Keymaster
    Post count: 568

    Hi Kari,

    Yes we had to rollback to a previous version as the latest release caused more issues than anything for most of our users.

    I’ve attached the 1.1.6.5 stylesheet, which should be all you need to fix things.

    Thanks,
    Evan

    Attachments:
    You must be logged in to view attached files.
    April 3, 2015 at 12:52 pm #4114

    Kari Sharp
    Participant
    Post count: 8

    Thank you, Evan. That is working for me now. I so appreciate your help!

    Kari

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.