Responsive Breakpoints - HL Vanilla Community
<main> <article class="userContent"> <p>With <strong>Higher Logic Vanilla's</strong> (<strong>Vanilla</strong>) Foundation theme, you can specify different <strong>responsive breakpoints</strong> to control how the <em>theme banner</em> and <em>content banner</em> images in your 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 look as good as possible on each type of device. To ensure a clean look, 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 to accommodate different-sized images for each device type. </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/J36QJ07NDAV8/banner-contentbanner-menu.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/J36QJ07NDAV8/banner-contentbanner-menu.png" alt="banner_ContentBanner_menu.png" height="546" width="1229" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>You can enable responsive breakpoints for the <strong>Banner </strong>and <strong>Content Banner</strong>:</p><ul><li>The <strong>Banner</strong> displays on various pages of your Vanilla community, such as <em>Categories</em>, <em>My Bookmarks</em>, <em>My Discussions</em>, and <em>Recent Discussions</em>.<ul><li>To access, click <strong>Banner </strong>from the Styles menu.</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) displays on pages that contain content, such as community posts (including discussions, ideas, questions, polls, events) and knowledge base articles.<ul><li>To access, click <strong>Content Banner </strong>from the Styles menu.</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-medium float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/4F2QLJHUWJSQ/responsive-breakpoints-toggle.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/4F2QLJHUWJSQ/responsive-breakpoints-toggle.png" alt="responsive_breakpoints_toggle.png" height="584" width="567" loading="lazy" data-display-size="medium" 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><ol><li>Click <strong>Choose Image</strong> to navigate to and choose an image for that device type. The image displays as the banner in the "design canvas" and in the ellipsis field.</li><li>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.</li></ol><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><strong>✔️ TIP</strong>: 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>