Setting margins and padding for tablet/mobile devices

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Setting margins and padding for tablet/mobile devices - 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="When designing a page in EE Builder by default you'll do so in Desktop view, but often you'll need to adjust margins and paddings for rows, columns, and modules"/> <meta name="author" content="Event Engine CMS Ltd"/> <link rel="canonical" href="https://help.eventengine.tv/article/61-setting-margins-and-padding-for-mobile-devices"/> <meta name="twitter:card" content="summary"/> <meta name="twitter:title" content="Setting margins and padding for tablet/mobile devices" /> <meta name="twitter:description" content="When designing a page in EE Builder by default you'll do so in Desktop view, but often you'll need to adjust margins and paddings for rows, columns, and modules"/> <link rel="stylesheet" href="//d3eto7onm69fcz.cloudfront.net/assets/stylesheets/launch-1732006970862.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":"Setting margins and padding for tablet/mobile devices","item":"https://help.eventengine.tv/article/61-setting-margins-and-padding-for-mobile-devices"}]} </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">Setting margins and padding for tablet/mobile devices</h1> <a href="javascript:window.print()" class="printArticle" title="Print this article" aria-label="Print this Article"><i class="icon-print"></i></a> <p> When designing a page in EE Builder by default you'll do so in Desktop view, but often you'll need to adjust margins and paddings for rows, columns, and modules for tablets or mobile devices. This article will show you how to adjust these settings individually for each device type (desktop, tablet, mobile).</p> <ol> <li>Access the settings of the row, column, or module you'd like to adjust the margins or padding settings for. This can vary, as accessing the settings differs between rows, columns, and modules. <ol> <li>For rows and modules, you'll access the settings by clicking the wrench icon.<img src="//d33v4339jhl8k0.cloudfront.net/docs/assets/5cace2b72c7d3a392f9cd3b9/images/5d03b4552c7d3a1cad5b63c8/file-2N6qzG2f8H.png"></li> <li>For columns, you'll click the 'split square' icon to drop down the column menu. From here you'll click 'Column Settings' to access the immediate columns settings. In some cases, you'll have columns nested within another column. In these cases, you'll see an option in the drop-down that says 'Parent Column Settings', which you'll click instead if you're wanting to adjust the parent column.<img src="//d33v4339jhl8k0.cloudfront.net/docs/assets/5cace2b72c7d3a392f9cd3b9/images/5d03b5422c7d3a1cad5b63d4/file-7He0YwTMcI.png"></li> </ol></li> <li>Once you've clicked to open the settings a modal pop-up window will appear with several tabs. To adjust the margins and/or padding you'll click the 'Advanced' tab at the top of the window.<img src="//d33v4339jhl8k0.cloudfront.net/docs/assets/5cace2b72c7d3a392f9cd3b9/images/5d03b5c82c7d3a1cad5b63df/file-RUL17vctqp.png"></li> <li>From within the advanced tab, depending on what you're adjusting the settings for, you'll see adjustment options for either Margins, Padding, or both. By default, you should be entered into the Desktop view, which will be identified with an icon resembling a desktop computer.<img src="//d33v4339jhl8k0.cloudfront.net/docs/assets/5cace2b72c7d3a392f9cd3b9/images/5d03b64e2c7d3a1cad5b63ec/file-3axz7MGxni.png"></li> <li>Clicking the Desktop icon will change the icon to a Tablet icon, and clicking the Tablet icon will change it to a Mobile icon, allowing you to make adjustments that would only reflect devices detected as having the chosen screen size.  You'll also notice that EE Builder itself will reflect a change, giving you an idea in the builder what the outcome of your changes will appear like on that device.<img src="//d33v4339jhl8k0.cloudfront.net/docs/assets/5cace2b72c7d3a392f9cd3b9/images/5d03b74404286318cac448ac/file-pY6LIomWjo.png" style="width: 694px;"></li> <li>Once you've selected the appropriate device by clicking the icon next to (or above) the fields you'd like to adjust for it, you may now change these fields to reflect that changes you'd like to make. This works in the same way as you would for Desktop. Make your edits and when you're done click the 'Save' button.<img src="//d33v4339jhl8k0.cloudfront.net/docs/assets/5cace2b72c7d3a392f9cd3b9/images/5d03b7e404286318cac448b6/file-yG968dM9PV.png"></li> <li>You may now change the view in EE Builder back to Desktop by clicking the Mobile icon again.</li> </ol> <p> That's it! You've now made changes the reflect device types directly. This will allow you to customise how your page will appear on various devices.</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-01-29 >Last updated on January 29, 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

Setting margins and padding for tablet/mobile devices - Event Engine