Responsive Breakpoints - Vanilla Success
<main> <article class="userContent"> <p>Within the new Foundation theming system, you can specify different <strong>responsive breakpoints</strong> to control how the <em>theme banner</em> and <em>content banner</em> images in your <strong>Higher Logic Vanilla</strong> (<strong>Vanilla</strong>) community display on various devices.</p><p>Desktops, tablets, and mobile devices have different screen sizes, so it's important that your images adapt to the current screen in order to look as good as possible on each type of device. To ensure a clean display, you can upload different-sized images for when your banners display on desktops, tablets, and mobile devices.</p><p><strong>✔️ TIP</strong>: See <em>Image Notes</em>, below, for image-file types and Vanilla's size recommendations.</p><h2 data-id="enable-responsive-breakpoints">Enable Responsive Breakpoints</h2><p>There are two toggles in the theme editor that can be enabled in order to accommodate different-sized images for the different devices. The two toggles work independently on:</p><ul><li>The <strong>Banner</strong> that displays on various pages of your Vanilla community, such as Categories, My Bookmarks, My Discussions, and Recent Discussions.<ul><li>To access, click <strong>Global & Homepage > Banner</strong>.</li><li>To learn about this banner, see <a href="https://success.vanillaforums.com/kb/articles/402-customizing-the-banner" rel="nofollow noreferrer ugc">Customizing the Banner</a>.</li></ul></li><li>The <strong>Content Banner</strong>, which is optional and displays on pages that contain content, such as community posts (including discussions, ideas, questions, polls, events) and KB articles.<ul><li>To access, click <strong>Content > Content Banner</strong>.</li><li>To learn about this banner, see <a href="https://success.vanillaforums.com/kb/articles/415-content-banner" rel="nofollow noreferrer ugc">Content Banner</a>.</li></ul></li></ul><p>When you enable the option for these two banners, the panels expands to display two fields: <strong>Mobile</strong> and <strong>Tablet</strong>.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/5LAKZIMERSHD/respbrkpnts-toggle.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/5LAKZIMERSHD/respbrkpnts-toggle.png" alt="RespBrkpnts-toggle.png" height="352" width="1161" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="choose-banner-images">Choose Banner Images</h2><p>The steps for selecting mobile and/or tablet images is the same for both banners.</p><p><strong>✔️ TIP</strong>: See <em>Image Notes</em>, below, for information on preparing your images.</p><p>To choose images for the banners:</p><p>1. Click <strong>Choose Image</strong> to navigate to and choose an image for that device type.</p><p>The image displays as the banner in the "design canvas" and in the ellipsis field.</p><p>2. Click the ellipsis and choose <strong>Revert</strong> to re-apply the previous selection or click <strong>Delete</strong> to remove the image, leaving no image.</p><h2 data-id="image-notes">Image Notes</h2><p>This section provides helpful information for preparing your images for use in your Vanilla community.</p><h3 data-id="image-file-types">Image file types</h3><p>Banner images can be:</p><ul><li><strong>.JPG</strong>,</li><li><strong>.GIF</strong>, or</li><li><strong>.PNG</strong>.</li></ul><p>Vanilla recommends <strong>.JPG</strong> because this file type can be optimized.</p><h3 data-id="resizing-images">Resizing images</h3><p>If you want to use the same image for all device types, you must resize the image in an image editor. You <strong>cannot</strong> resize the image after you've uploaded it to Vanilla. </p><h3 data-id="desktop-device-image-sizes">Desktop device image sizes</h3><p>To ensure that your full-width images look good on any desktop device, Vanilla recommends an image size of <strong>1920 x 322 pixels</strong>.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/563/4BYIKRYLIJC9.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/563/4BYIKRYLIJC9.png" alt="banner with img.png" height="510" width="2880" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="tablet-device-image-sizes">Tablet device image sizes</h3><p>To ensure that your full-width images look good on any tablet device, Vanilla recommends an image size of <strong>768 x 255 pixels</strong>.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/319/J2KBPKNNP77V.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/319/J2KBPKNNP77V.png" alt="ipad_knowshare.png" height="1143" width="1134" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="mobile-device-image-sizes">Mobile device image sizes</h3><p>To ensure that your full-width images look good on any mobile device, Vanilla recommends an image size of <strong>414 x 120 pixels</strong>.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/276/RUDG987FFG7Z.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/276/RUDG987FFG7Z.png" alt="knowshare_iphone.png" height="998" width="1250" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="test-your-images">Test your images</h3><p>The dimensions listed above are the recommended image sizes.</p><p>We also recommend that you try these sizes on your images <em>in your Staging site</em>. If they display properly, you can commit them to your Production site.</p> </article> </main>