How to test a site responsively

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>How to test a site responsively - 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="Here are the main steps you can take to test your website responds according to different devices. First, access the EE Builder and enter the 'Responsive Editin"/> <meta name="author" content="Event Engine CMS Ltd"/> <link rel="canonical" href="https://help.eventengine.tv/article/69-how-to-test-a-site-responsively"/> <meta name="twitter:card" content="summary"/> <meta name="twitter:title" content="How to test a site responsively" /> <meta name="twitter:description" content="Here are the main steps you can take to test your website responds according to different devices. First, access the EE Builder and enter the 'Responsive Editin"/> <link rel="stylesheet" href="//d3eto7onm69fcz.cloudfront.net/assets/stylesheets/launch-1732006972479.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":"How to test a site responsively","item":"https://help.eventengine.tv/article/69-how-to-test-a-site-responsively"}]} </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">How to test a site responsively</h1> <a href="javascript:window.print()" class="printArticle" title="Print this article" aria-label="Print this Article"><i class="icon-print"></i></a> <p>Here are the main steps you can take to test your website responds according to different devices.</p> <p>First, access the EE Builder and enter the 'Responsive Editing' mode:</p> <h2>Entering responsive edit mode</h2> <p>There are two different methods you can use to perform responsive edits:</p> <ul> <li>Selecting the 'Responsive Editing' option: To access this option on any page, go to the Tools menu and select 'Responsive Editing' or just use the keyboard shortcut 'R'.</li> </ul> <p><img src="//d33v4339jhl8k0.cloudfront.net/docs/assets/5cace2b72c7d3a392f9cd3b9/images/5e31899804286364bc948fdd/file-1TAlRo5tTo.png" style="width: 663px; max-width: 100%; "></p> <ul> <li>Alternatively you can responsively edit on a per row, column or module basis by selecting the little Desktop icon that appears when editing that element. Here you can change the icon to a tablet to illustrate that you are viewing a tablet-sized device. Format and setting changes within this view will be applied for that particular screen size. The little Desktop icon is visible in most modules. Just toggle between the tablet and mobile view and apply the relevant styles that improve your design on smaller devices.</li> </ul> <p><img src="//d33v4339jhl8k0.cloudfront.net/docs/assets/5cace2b72c7d3a392f9cd3b9/images/5e3ac68404286364bc94e330/file-iw2ZSaES7E.png" style="width: 66px; background-color: initial;"></p> <p><img src="//d33v4339jhl8k0.cloudfront.net/docs/assets/5cace2b72c7d3a392f9cd3b9/images/5e318bd32c7d3a7e9ae6eb47/file-4A2J7Aq1XJ.png" style="width: 663px; max-width: 100%; "></p> <h3>Spacing</h3> <p>You have the ability to override the default margin and padding settings on each row and column, if you think it's needed for tablet/mobile. Your design will always automatically adjust for smaller devices but you can still override these settings if required. </p> <p>You can read about how to update the spacing in greater detail here: <a href="//help.eventengine.tv/article/61-setting-margins-and-padding-for-mobile-devices">Setting margins and paddings on smaller devices</a></p> <h3>Stacking & Visibility</h3> <p>By default, the EE Builder will automatically apply design responsiveness to make your content look good on different devices. In some cases you may want to edit sections yourself to further improve the layout. </p> <h3>Visual checking </h3> <p>We recommend to not completely rely on the view Responsive Editing Mode as some smart phones have many different screen sizes. For example, there are differences between the view on iPhone X and iPhone X Pro, so we recommend that you check through all device view options before publishing. </p> <p> <a></a></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=2023-07-24 >Last updated on July 24, 2023</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

How to test a site responsively - Event Engine