Change stacking order?

? Where have the other comments about this item gone ?

Earlier today…. i commented here … about an email to the themebuilder about this issue… I still haven’t received a reaction though..

I’ve also been hooked by the awesomeness of Stacker-Lite, and frustrated by the vertical post order.

Themebuilder is right in principle by saying “It’s not possible” — because stacker is designed to stack. That’s how it makes such a pretty tiled grid. If items with potentially-varying-heights were ordered horizontally, it wouldn’t look like a pretty stack.

But to say “it’s not possible” is wrong in practice. Everything’s possible!

I’m close to getting what you were describing… My approach goes something like this:

1. Create a child theme (stacker-lite-child)
2. In your child theme’s CSS:

1. set a max-width for .wrapper
2. set a max-width and max-height for .item
3. set float:left for .item
4. set .masonry to have -moz-column-count:1, -webkit-column-count:1, and column-count:1.

You’ll need to tinker with borders and spacing, but this should get the job done.

P.S. Did I mention that this is my first post ever on a WordPress forum? It is. Sorry in advance for any violation of convention here.

Update: I think I’ve got it working. And apparently floats are *so* last decade (or so it would seem), so I’m using flexbot.

Unless someone changes something, all you need is:

1. Make a folder: wp-content/themes/stacker-lite-child
2. Add a new file to that folder, called style.css
3. The contents of the new style.css should be:

   /*
    Theme Name:     Stacker Lite Child Theme
    Theme URI:      https://wordpress.org/themes/stacker-lite/
    Description:    Stacker Lite Child Theme
    Author:         ThemeFurnace
    Author URI:     https://wordpress.org/themes/author/themefurnace/
    Template:       stacker-lite
    Version:        1.0.0
   */
   @import url("../stacker-lite/style.css");
   .masonry {
   	max-width: 850px;
   	display: -webkit-box;
   	display: -moz-box;
   	display: -ms-flexbox;
   	display: -webkit-flex;
   	display: flex;
   	justify-content: center;
   	align-items: flex-start;
   	flex-flow: row wrap;
   	margin: 0 auto;
   }
   .item:not(.inside) {
   	height: 500px;
   	flex: 0 0 260px;
   	margin: 10px;
   }

4. And finally: activate your child theme in wp-admin

If you know what you’re doing, and this doesn’t look right, please let me know. I rarely know what I’m doing.

@nuzzina — there’re lots of potential reasons for that problem (assuming its a problem — with flexbot there should only be one column if the browser is resized to a small width). It could be that your browser doesn’t support flexbot, there could be a typo in the css, ThemeFurnace might’ve updated something that caused my workaround to break, I could’ve made a mistake in my code, or ???. It’d be ideal if you could include a link to your site, if you want me (or anyone else who’s listening) to check it out. Hope we can get it fixed!