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;
