Projects Widget

Hi,

the alignment of the elements is based on a JavaScript plugin to be displayed as a masonry grid. However you can override it with some CSS to align these to be underneath each other with this:

.meteorite-projects .isotope-container {
  height: auto !important;
}
.meteorite-projects .project-item {
  position: static !important;
  display: inline-block;
}

Please tell me if this solves your issue or whether you need further assistance.

Perfection! Thank you!

Sorry to go back to this.

Since I’ve added this CSS it makes the blocks very jumpy when flicking between the categories. Whereas before it was a smooth transition when filtering. Also on the odd occasion the blocks will be half way down the page when selecting a category filter.

Any idea if there’s a fix for that? Could it be more an issue with the browser (Chrome)?

Many thanks!

It’s not an issue with the browser. The projects widget uses https://isotope.metafizzy.co/ for the filtering / masonry grid. As I thought you don’t need the filtering (it’s not in your example image) that was the fastest and easiest fix.

To solve your issue, you need to overwrite the main javascript in a child theme. There’s a function call from isotope inside meteorite_portfolioIsotope. Overwrite it and add in a layoutMode set to fitRows to achieve what you want.

$selector.isotope({
            filter: '*',
            layoutMode: 'fitRows',
            itemSelector: '.project-item',
            percentPosition: true,
            animationOptions: {
              duration: 750,
              easing: 'liniar',
              queue: false,
            }
          });

Please tell me if you need further assistance with it.