Portfolio page changing using different screen sizes

I have a website that when on a larger screen, the portfolio items are listed in date order, but when changing screen sizes, the order of the portfolio items changes and they no longer correct:
http://rrlegacyct.wpengine.com/sermons/

smaller screen (laptop 12") - https://prnt.sc/i8r5bu
larger screen (18.5") - https://prnt.sc/i8r6v2

Any ideas on how to correct the issue?

Hello There,

Thanks for writing in!

This issue is happening because as the screen becomes smaller, the titles will be in two rows.

To resolve this issue, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media(max-width: 1350px){
    .page-template-template-layout-portfolio .entry-title.entry-title-portfolio {
        min-height: 55px;
    }    
}

The code will set a mini height to all the titles so that they will still be inline.

Please let us know how it goes.

Perfect, thank you! That solved the issue.

You’re welcome!
We’re glad we were able to help you out.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.