Note: This article is for anyone using a site theme with a version 2.0.0 or higher for Horizon, Ice Cream, and Altitude.
Adding a custom banner to your course can help make your course landing page look fantastic. You'll want to keep the following points in mind before you upload your image. (If you are using an older Theme version, please check the guidelines here)
For best results, upload a .PNG image with the following resolution:
- 1440px x 400px: Site Landing Page, Bundle Landing Page - V2 themes
- 1598px x 650px: Horizon Theme Course Landing Page
- 1596px x 869px: Ice Cream Theme Course Landing Page
- 1727px x 807px: Altitude Theme Course Landing Page
Banner Not Showing Up As Expected?
If your image seems to be cut off when you view your course page, it is likely due to the way the aspect ratio is handled as your screen size changes.
In the example below, you'll notice that as the width browser window changes (simulating desktop, tablet and mobile view), the visible section of the Course Banner also changes. This is because the banner section remains at a fixed height to accommodate the text and button that are on top of the Course Banner. If the header section always stayed at the same aspect ratio as the banner you uploaded, the text and buttons wouldn't fit on smaller screens, causing a big mess.
So, with this in mind, you'll want to pick a Course Banner image that looks good on all screen sizes.