Adjusting sermon image styling

Dekstop View

By default the image width is 30% of the available space, while the height is always 100%. The sermon content fills the remaining 70% of space.

To adjust the image width, take a look at the following code:

For relative image width, please put the following CSS: flex: 0 25%;
For fixed size image, please put: flex: 0 0 200px;

If you wish to display sermon image on top, like on mobile, please add the following CSS:

Mobile View

The image is displayed at top, it fills the available width completely and maintains an aspect ratio of 16:9 (padding-top: 56.25%).

To adjust the image height, take a look at the following code:

To set some other aspect ratio, you can use: padding-top: 75% (4x3 ratio)
Or you can have fixed height: padding-top: 0; height: 300px;

  • 0 Users Found This Useful
Was this answer helpful?

Related Articles

Podcast “Page Not Found” Error

This problem has to do with the way WordPress feeds work (or don’t work in this case). You must...

Template Tags

Version 1.5+ Template tags are used within your theme files to display information...

Getting Started with Sermon Manager for WordPress

After installing Sermon Manager from the WordPress Repository, you’ll see a new top level menu...

Troubleshooting Sermon Manager

Better Questions Get Better Answers Every day, Sermon Manager users email us asking us to fix...

Images for Preachers, Sermon Series, and Topics

Version 1.5+ Displaying Images for an Individual Sermon render_sermon_image($size) This allows...