Example of Announcements Overlapping…

In the free version, when announcements have different excerpt lengths (you setup announcements that all vary in content length), you may find that some of the announcements overlap on the timeline. This is an unwanted effect from the announcements being varied in length.

The quickest and easiest work around is to define a min-height on the announcement containers, so that all of your containers remain at about the same height.

Here is a quick example of setting a min-height on the announcement containers, which helps combat the announcement containers overlapping on the timeline.

@media only screen and (min-width: 822px) {
   .cd-timeline-block {
      min-height: 272px;
   }
}

You’ll want to add the code snippet above to your themes style.css file (or child theme if that is the route you are going). If you are unfamiliar with editing theme files, you can also use a third party plugin to apply the styles. The plugin that we often recommend is Simple Custom CSS.

Once the plugin is installed on your site, you can copy the styles provided above, and add them to the section found in ‘Appearance > Custom CSS‘.

Once you’ve applied the above code snippet to your themes style.css file (or via Simple Custom CSS), you can reload the page – which should now look similar to the following screenshot:

Announcements Overlap Fixed