The Foundation theme allows you to specify different responsive breakpoints to control how the Banner and Content Banner images in your community display on various devices.
Desktops, tablets, and mobile devices have different screen sizes, so it's important that your images adapt appropriately on each type of device. To ensure a clean look, you can upload images of different sizes for when your banners display on desktops, tablets, and mobile devices.
✔️ TIP: Refer to the Image notes section below for image-file types and our size recommendations.
Enable Responsive Breakpoints
When editing a Theme, you can set responsive breakpoints for the Banner and Content Banner.
- The Banner displays on various pages of your Vanilla community, such as Categories, My Bookmarks, My Posts, and Recent Posts.
- The Content Banner (which is optional) displays on pages that contain content, such as community posts (including discussions, ideas, questions, polls, events) and knowledge base articles.
- To access, click Content Banner from the Styles menu.
- To learn about this banner, see Content Banner.
When you enable the Responsive Breakpoints toggle for these two banners, the panels expands to display two additional fields: Tablet and Mobile.
Choose images
The steps for selecting responsive breakpoint images for mobile and/or tablet are the same for both banners.
✔️ TIP: See Image notes below for information on preparing your images.
To choose images for the banners:
- Click Choose Image to open a dialog.
- Browse for the desired image. The image displays as the banner in the "design canvas" and in the ellipsis field.
📝 NOTE: Click the ellipsis and choose Revert to re-apply the previous selection or click Delete to remove the image.
Image notes
This section provides helpful information for preparing your images for use in your Vanilla community.
Image file types
Banner images can be:
✔️ TIP: Vanilla recommends .jpg because this file type can be optimized.
Resizing images
If you want to use the same image for all device types, you must resize the image in an image editor before uploading it. You cannot resize the image after you've uploaded it to Vanilla.
Desktop device image sizes
To ensure that your full-width images look good on any desktop device, Vanilla recommends an image size of 1920 x 322 pixels.
Tablet device image sizes
To ensure that your full-width images look good on any tablet device, Vanilla recommends an image size of 768 x 255 pixels.
Mobile device image sizes
To ensure that your full-width images look good on any mobile device, Vanilla recommends an image size of 414 x 120 pixels.
Test your images
The dimensions listed above are the recommended image sizes.
We also recommend that you try these sizes on your images in your Staging site. If they display properly, you can commit them to your Production site.
