Timeline Text Displays Out-of-line

#1

Evening aTheme team,

I’m having a display issue with my timeline. In the demo on your site (and other sites using Sydney Pro), the text is beside the icon. On my website, the text is either below or above. Have i installed something wrong?

In this sample page, I’ve used page builder. The first time line shares a row. The second has a row all to itself.

The timeline is also on the home page:

I’ve got some cutoms CSS running as well. I’ve tried the default value of H56px W56px with no luck:

.timeline-inner .icon .fa {
    display: none;
}

.timeline:nth-of-type(1) .icon {
    background: transparent url(https://www.ingencia.co.uk/wp-content/uploads/2016/02/business-analysis.gif) no-repeat top center !important;
}
.timeline:nth-of-type(2) .icon {
    background: transparent url(https://www.ingencia.co.uk/wp-content/uploads/2016/02/scope-and-specification-design.gif) no-repeat top center !important;
}
.timeline:nth-of-type(3) .icon {
    background: transparent url(https://www.ingencia.co.uk/wp-content/uploads/2016/02/development.gif) no-repeat top center !important;
}

.timeline:nth-of-type(4) .icon {
    background: transparent url(https://www.ingencia.co.uk/wp-content/uploads/2016/02/testing-and-training.gif) no-repeat top center !important;
}

.timeline:nth-of-type(5) .icon {
    background: transparent url(https://www.ingencia.co.uk/wp-content/uploads/2016/02/Deployment-and-Rollout.gif) no-repeat top center !important;
}

.timeline:nth-of-type(6) .icon {
    background: transparent url(https://www.ingencia.co.uk/wp-content/uploads/2016/02/support.gif) no-repeat top center !important;
}

.timeline-inner .icon {
	height: 70px;
	width: 70px;
}
#2

I got this sorted by modifying the CSS in the main template rather than by adding to the SimpleCSS extension.
Turned out there were two problems:

  1. The wudget was displaying the a squished timeline because it was in a two-column row. Settng the width to 65% from 90% fixed that.
  2. Because I changed the size of the graphic from 56px to 70px, I had o change the offset from 30px to 37px for both the odd and even icons.