Create a website

Try UGAL for free for 30 days

No commitment, no credit card required

How to make your custom theme responsive

UGAL supports standard and responsive themes. Standard themes depend on the browser native zooming ability for the display on mobile devices. Responsive themes make use of CSS3 media queries to optimize the display for all devices, regardless of their size.

This page is a work in progress. Please make sure to let us know if you have ideas for better handling some situations so that we can update this page.

If you use a custom theme and want to upgrade it to be responsive, this page is for you. It is based on notes we took when migrating our own themes and details the changes you can expect when declaring your custom theme responsive.

Tell UGAL that your theme is responsive

The first step is to tell UGAL to handle your theme as a responsive theme. To do so, check the "Responsive" checkbox when defining your theme.

Update your theme as responsive

Update your theme as responsive.

Changes when using a responsive themes

Once you have defined your theme as responsive, a few things will change for your website.

Output a viewport meta tag

For responsive themes, UGAL outputs a viewport meta tag in the head of the document:

    <meta name="viewport" content="width=device-width, initial-scale=1">

This change instructs browsers to not resize the page to fit the screen because resizing is taken care of by the page itself.

Horizontal layout only, no more font selection

For responsive themes, the layout selection disappears from the design tab, and your website is set on the "horizontal" layout option. It cannot be changed. A navigation bar taking a fair amount of space on the side of the screen does not fit the spirit of responsive web design.

The font selection disappears as well from the design tab and UGAL stops outputing inline font related CSS declarations. The following will be gone from your HTML markup:

<style type="text/css">
    body {font-size: 84%; font-family: Trebuchet MS, sans-serif;}

Fonts are be much better managed at the theme level, specially with the availability of web font services like Google fonts.

Navigation - say hi to the hamburger !

Navigation is one of the trickiest issue when making your website mobile friendly. The common approach is to use a "hamburger" style menu at mobile sizes:

Hamburger menu

Hamburger menu for mobile devices

The multiple options supported by our current navigation system (static, dynamic, horizontal, vertical) made it difficult to support both desktop and mobile navigation with the same HTML markup. We have instead taken the approach to output 2 sets of navigation bars : one for desktop (to be hidden on mobile sizes) and one for mobiles (to be hidden on desktop sizes).

<div id="navigation">	
  <ul class="navigation static">
    <li class="horizontal top-1 first"><a href="/">Home</a></li>
  <div class="mobile">
    <a href="#" id="tr-mobile"></a>
    <div id="mobile-menu">
    <ul class="mobile-top">
      <li><a href="/">Home</a></li>

Both navigation containers list the same links and can be shown or hiddent using CSS media queries:

@media screen and (min-width:801px) {
    #navigation ul.static {display:block;}
    #navigation ul.dynamic {display:block;}
    #navigation {display:none;}
@media screen and (max-width:800px) {
    #navigation ul.static {display:none;}
    #navigation ul.dynamic {display:none;}
    #navigation {display:block;}

In case this approach does not fit your use case, the workaround is to integrate your own navigation markup in a HTML banner.

A simple CSS grid system

Making HTML tables responsive requires to implement CSS and/or Javascript hacks. We did not want to do this for the few places (listed below) where UGAL relies on HTML tables. Instead, we have implement a very simple CSS 6 column grid system, used for responsive themes only:

<div class="grid">
    <div class="row">
        <div class="column-6"> ... </div>
    <div class="row">
        <div class="column-4"> ... </div>
        <div class="column-2"> ... </div>

The default behavior of the grid is defined ugal-defaut.css, which is always loaded first for your website. If it does not fit your needs, you can overwrite it in your own global.css file. Let us know if you make interesting changes to it, we might want to port them to the default CSS file.

Responsive shopping cart and checkout markup

Instead of the table based shopping cart used for standard themes, responsive themes output a new shopping cart markup based on the simple 6 column grid system.

<div class="grid" id="cartDetail">
  <div class="row cartLine">
    <div class="column-4 cartLineDescription">
      <div class="cartThumbnail"> {productPhoto} </div>
      <a href="{productUrl}" class="itemLink">{productName}</a>
      <span class="itemReference">Ref: {itemReference}</span>
    <div class="column-2 cartLineData">
      <div class="cartLinePrice">{itemPrice}</div>
      <div class="cartLineQuantity">
        <input type="text" class="fInput cartQuantity" value="{itemQty}">
      <div class="cartLineTotal">{cartLineTotal}</div>

Login and contact page markup

For responsive themes, the layout for the login page and the contact pages is now based on the simple 6 column grid system as well, so that the right hand side content of the page shifts down on smaller screens.

Create a website

Try UGAL for free for 30 days

No commitment, no credit card required

Newsletter subscription