Make sermon list into grid

Like this?

https://faithcommunitybible.org/sermons/

Yes, something like that. Just displaying the sermon thumbnail, title, the date.

This should get you started. Add this to your child theme’s style.css file:

/**
* 3-Column
*****************************************/
.wpfc-sermon-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1100px;
  margin: 2em auto;
}

.wpfc-sermon {
  width: 32%;
  margin: 0 auto 2em;
}

.wpfc-sermon-inner {
  display: block;
  flex-flow: inherit;
  height: 100%;
}

.wpfc-sermon-main,  
.wpfc-sermon-image {flex: inherit;}

.wpfc-sermon-image-img {
  height: 100%;
  padding-top: 100%;
}

.sm-pagination,
#wpfc_sermon_sorting {width: 100%;}

#wpfc_sermon_sorting {justify-content: center;}

thank you so much! Its a big help.

Also, is there a way to take this out?

View post on imgur.com

In the Sermon Manager Plugin go to ‘Settings > Advanced’ and unclick ‘Theme Compatibility’. Save it. That should remove the sidebar.

Hello Mike,

Sorry but it didn’t remove the sidebar :/
I did try ticking and unticking it as well, but to no avail.

That’s odd. I have an old version of Divi and it worked. Maybe the current version of Divi is different enough for it to not work.

Since I’m not familiar with Divi, the only other way that I know is to create a custom archive-wpfc_sermon.php file. You’ll need to find the page.php in Divi and copy and rename it archive-wpfc_sermon.php and put it in your child theme’s folder. Then find <?php get_sidebar(); ?> in the newly created archive-wpfc_sermon.php page and delete it.

Just thinking. You could just hide the sidebar using CSS instead of creating a custom archive:

/* Hides Sidebar on the Sermon Archive */

.post-type-archive-wpfc_sermon #sidebar {display: none;}

@media (min-width: 981px) {

  #left-area {width: 100%;}

  #main-content .container:before {background-color: transparent;}

}

• This reply was modified 3 years, 2 months ago by Mike Matenkosky.

Hi there,

It works. Thanks for the help! I really appreciate it.

Sincerely,
Cara