Responsive options available

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Responsive options available - Event Engine</title> <meta name="viewport" content="width=device-width, maximum-scale=1"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="format-detection" content="telephone=no"> <meta name="description" content="The EE Builder has the following responsive options built in: Breakpoints By default there are three device sizes: Large: Desktop and Laptop displays – what yo"/> <meta name="author" content="Event Engine CMS Ltd"/> <link rel="canonical" href="https://help.eventengine.tv/article/67-responsive-options-available"/> <meta name="twitter:card" content="summary"/> <meta name="twitter:title" content="Responsive options available" /> <meta name="twitter:description" content="The EE Builder has the following responsive options built in: Breakpoints By default there are three device sizes: Large: Desktop and Laptop displays – what yo"/> <link rel="stylesheet" href="//d3eto7onm69fcz.cloudfront.net/assets/stylesheets/launch-1732006970485.css"> <style> body { background: #ffffff; } .navbar .navbar-inner { background: #4169ea; } .navbar .nav li a, .navbar .icon-private-w { color: #ffffff; } .navbar .brand, .navbar .nav li a:hover, .navbar .nav li a:focus, .navbar .nav .active a, .navbar .nav .active a:hover, .navbar .nav .active a:focus { color: #ffffff; } .navbar a:hover .icon-private-w, .navbar a:focus .icon-private-w, .navbar .active a .icon-private-w, .navbar .active a:hover .icon-private-w, .navbar .active a:focus .icon-private-w { color: #ffffff; } #serp-dd .result a:hover, #serp-dd .result > li.active, #fullArticle strong a, #fullArticle a strong, .collection a, .contentWrapper a, .most-pop-articles .popArticles a, .most-pop-articles .popArticles a:hover span, .category-list .category .article-count, .category-list .category:hover .article-count { color: #4169ea; } #fullArticle, #fullArticle p, #fullArticle ul, #fullArticle ol, #fullArticle li, #fullArticle div, #fullArticle blockquote, #fullArticle dd, #fullArticle table { color:#151c32; } </style> <link rel="apple-touch-icon-precomposed" href="//d3eto7onm69fcz.cloudfront.net/assets/ico/touch-152.png"> <link rel="shortcut icon" type="image/png" href="//d3eto7onm69fcz.cloudfront.net/assets/ico/favicon.ico">  <script type="application/ld+json"> {"@context":"https://schema.org","@type":"WebSite","url":"https://help.eventengine.tv","potentialAction":{"@type":"SearchAction","target":"https://help.eventengine.tv/search?query={query}","query-input":"required name=query"}} </script> <script type="application/ld+json"> {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Event Engine","item":"https://help.eventengine.tv"},{"@type":"ListItem","position":2,"name":"Event Engine","item":"https://help.eventengine.tv/collection/1-event-engine"},{"@type":"ListItem","position":3,"name":"Responsive options available","item":"https://help.eventengine.tv/article/67-responsive-options-available"}]} </script> <style> @import url('https://fonts.googleapis.com/css?family=Poppins:400,600'); body { font-family: 'Poppins', sans-serif; } .navbar-inner { background: #151c32 !important; padding-top: 5px; padding-bottom:5px; } a.brand span { font-weight: 600; font-size: 34px; } h1,h2,h3,h4,h5,h6,h1.title { font-weight:600; } #searchBar button { background: #4169ea; } .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; </style> </head> <body> <header id="mainNav" class="navbar"> <div class="navbar-inner"> <div class="container-fluid"> <a class="brand" href="https://eventengine.tv"> <span>Event Engine</span> </a> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="nav-collapse collapse"> <nav role="navigation"> <ul class="nav"> <li id="home"><a href="/">Knowledgebase <b class="caret"></b></a></li> <li id="contact"><a href="#" class="contactUs" onclick="window.Beacon('open')">Contact</a></li> <li id="contactMobile"><a href="#" class="contactUs" onclick="window.Beacon('open')">Contact</a></li> </ul> </nav> </div> </div> </div> </header> <section id="contentArea" class="container-fluid"> <div class="row-fluid"> <section id="main-content" class="span9"> <div class="contentWrapper"> <article id="fullArticle"> <h1 class="title">Responsive options available</h1> <a href="javascript:window.print()" class="printArticle" title="Print this article" aria-label="Print this Article"><i class="icon-print"></i></a> <p> The EE Builder has the following responsive options built in:</p> <p> <strong>Breakpoints</strong></p> <p> By default there are three device sizes: </p> <ol> <li>Large: Desktop and Laptop displays – what you view by default when in the page builder.</li> <li>Medium: Tablet displays – by default this will be from 992px or less.</li> <li>Small: Mobile displays – from 768px or less.</li> </ol> <p> Device sizes are determined by breakpoints set on the browser width. You can read about how to determine the device sizes in the '<a href="//help.eventengine.tv/article/69-how-to-test-a-site-responsively">How to test a site responsively</a>' article.</p> <p> <strong>Stacking</strong></p> <p> You can control how columns and modules are stacked and ordered as the screen size shrinks or grows. Column stacking can be controlled by setting custom widths for each different device size. To read how to control columns please refer to the '<a href="//help.eventengine.tv/article/53-columns">Columns</a>' and the '<a href="//help.eventengine.tv/article/60-how-to-design-mobile-friendly-columns">How to set mobile friendly columns</a>' articles.  </p> <p> <strong>Spacing</strong></p> <p> Some content in Desktop view may have large padding that affects the design quality on Mobile view. By default the builder will automatically adjust the margin and paddings for rows, columns and modules. However, you can override these options and apply your own spacing on a per row, column and module basis for both tablet and mobile. You can read how to adjust spacing in the '<a href="//help.eventengine.tv/article/61-setting-margins-and-padding-for-mobile-devices">Setting margins and padding for tablet/mobile devices</a>' article. </p> <p> <strong>Visibility</strong></p> <p> You have the ability to control the visibility of rows, columns and modules on different devices. By default, all modules will be visible at every device size unless you specifically set the visibility to Large and Medium devices only. For details please refer to the '<a href="//help.eventengine.tv/article/71-setting-content-visibility-by-device-size">Setting content visibility by device size</a>' article.</p> </article> <section class="articleFoot"> <i class="icon-contact"></i> <p class="help">Still need help? <a id="sbContact" href="#" class="contactUs" onclick="window.Beacon('open')">Contact Us</a> <a id="sbContactMobile" href="#" class="contactUs" onclick="window.Beacon('open')">Contact Us</a> </p> <time class="lu" datetime=2020-02-13 >Last updated on February 13, 2020</time> </section> </div> </section> <aside id="sidebar" class="span3"> <form action="/search" method="GET" id="searchBar" class="sm" autocomplete="off"> <input type="hidden" name="collectionId" value="5cace8c80428631d263beccd"/> <input type="text" name="query" title="search-query" class="search-query" placeholder="Search" value="" aria-label="Search" /> <button type="submit"> <span class="sr-only">Toggle Search</span> <i class="icon-search"></i> </button> <div id="serp-dd" style="display: none;" class="sb"> <ul class="result"> </ul> </div> </form> <h3>Categories</h3> <ul class="nav nav-list"> <li ><a href="/category/4-getting-started">Getting started <i class="icon-arrow"></i></a></li> <li class="active" ><a href="/category/64-responsive-design">Responsive Design <i class="icon-arrow"></i></a></li> <li ><a href="/category/98-troubleshooting">Troubleshooting <i class="icon-arrow"></i></a></li> <li ><a href="/category/5-page-builder">Page Builder <i class="icon-arrow"></i></a></li> <li ><a href="/category/6-customization">Customization <i class="icon-arrow"></i></a></li> <li ><a href="/category/7-design">Design <i class="icon-arrow"></i></a></li> <li ><a href="/category/8-blogging">Blogging <i class="icon-arrow"></i></a></li> <li ><a href="/category/15-forms">Forms <i class="icon-arrow"></i></a></li> </ul> </aside> </div> <div id="noResults" style="display:none;">No results found</div> <footer> <p>© <a href="https://eventengine.tv">Event Engine CMS Ltd</a> 2024. <span>Powered by <a rel="nofollow noopener noreferrer" href="https://www.helpscout.com/docs-refer/?co=Event+Engine+CMS+Ltd&utm_source=docs&utm_medium=footerlink&utm_campaign=Docs+Branding" target="_blank">Help Scout</a></span> </p> </footer> </section> <script id="beaconLoader" type="text/javascript">!function(e,t,n){function a(){var e=t.getElementsByTagName("script")[0],n=t.createElement("script");n.type="text/javascript",n.async=!0,n.src="https://beacon-v2.helpscout.net",e.parentNode.insertBefore(n,e)}if(e.Beacon=n=function(t,n,a){e.Beacon.readyQueue.push({method:t,options:n,data:a})},n.readyQueue=[],"complete"===t.readyState)return a();e.attachEvent?e.attachEvent("onload",a):e.addEventListener("load",a,!1)}(window,document,window.Beacon||function(){});</script> <script type="text/javascript">window.Beacon('init', '25503943-ccaa-4154-8c3c-1ad11629d331')</script> <script type="text/javascript"> function hashChanged() { var hash = window.location.hash.substring(1); if (hash === 'contact') { window.Beacon('open') } } if (window.location.hash) { hashChanged() } window.onhashchange = function () { hashChanged() } window.addEventListener('hashchange', hashChanged, false); </script> <script src="//d3eto7onm69fcz.cloudfront.net/assets/javascripts/app3.min.js"></script> <script> // keep iOS links from opening safari if(("standalone" in window.navigator) && window.navigator.standalone){ // If you want to prevent remote links in standalone web apps opening Mobile Safari, change 'remotes' to true var noddy, remotes = false; document.addEventListener('click', function(event) { noddy = event.target; while(noddy.nodeName !== "A" && noddy.nodeName !== "HTML") { noddy = noddy.parentNode; } if('href' in noddy && noddy.href.indexOf('http') !== -1 && (noddy.href.indexOf(document.location.host) !== -1 || remotes)){ event.preventDefault(); document.location.href = noddy.href; } },false); } </script> </body> </html>

CINXE.COM

Responsive options available - Event Engine