List items in services/portfolio not lining up

[slyskawa]

I am using the agency theme for a non-profit that is running a summer camp. It seems that if I have more then 3 services or 6 portfolios, I have blank spaces in some of the places where I should have items or pictures. You can see what is happening here http://www.lyska.xyz/sfa/.

I see this using the latest version of Chrome and Firefox on both my Macbook and Linux Mint. The problem seems to occur as I reduce the width of my browser. At full width on my 26" monitor, it lines up. As I reduce the width, it will show three rows on top but subsequent rows will have missing items. As I reduce the width and it displays a single item in each row, things work as expected.

Thanks for all the hard work you put into this theme.

[stp-ip]

Thanks for the report. For the portfolio I can reproduce it and will see, when I get a chance to fix it.

There is a new work in progress theme based on the ideas of the agency theme. It's still changing so data might need to be rewritten between releases, but wanted to get it on your radar already: github.com/okkur/syna and syna-demo.okkur.io

[lunk-liu]

I had the same problem and i still haven't fixed it completely. I think i fixed it by making sure all images are the same size and adjusting min-height in css to match length of the caption texts. Also played around with the witdths, but i don't remember if it helped.

@media(max-width:400px) {
    #portfolio .portfolio-item .portfolio-caption {
        max-width: 320px;
    }
    #portfolio .portfolio-item .portfolio-link {

        max-width: 320px;
    }

}

#portfolio .portfolio-item .portfolio-caption {
    /* ... */
    min-height: 130px;
    /* ... */
}

As for the services, the only thing i've tweaked is changed <div class="col-md-4"> to <div class="col-sm-3"> in services.html. I have no idea how bootstrap columns work :)

[lunk-liu]

Nope, that didn't fix it. I tried to add a long heading and a bit to long subtitle and the problem reapears: https://molnet.olq.se/index.php/s/MCWfGPUM7qJFq2M The margin for the long portfolio-item stretches a couple of pixels bellow the second row and causes the offset. I'm horrible at this kind of css wizardry so any help is much appreciated!

All my portfolio related css, including many desperate attempts: https://pastebin.com/xbi1FDv0

The portfolio grid is inside a <div class="col-md-3 col-sm-6 portfolio-item">. Haven't tweaked the html other than that.

[stp-ip]

I'll put it on my schedule today/tomorrow.

[stp-ip]

Thought it was already handled by someone else. So short fix is to change the image size to 400x266. That should fix the alignment issue. Will push an actual fix forward.

[mpourismaiel]

For some reason I can't figure out the problem is with image height. Adding the following would fix the problem.

.portfolio-link img {
    height: 240px;
}

I can't figure out the magic behind it. Should we set a fixed height for the images in the portfolio?