Create a website

Try UGAL for free for 30 days

No commitment, no credit card required

CSS tips for responsive themes

Here is an unordered list of CSS tips that we have assembled while working on making UGAL standard themes responsive.

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.

Media queries breakpoints

We found it easier to maintain as few media queries breakpoints as possible and decided to implement only 3 breakpoints for the standard themes:

  • Portrait smartphones : below 480px wide
  • Landscape smartphones and tablets : between 480px and 800px wide
  • Desktops : above 800px wide.

Which translates into the following CSS:

@media screen and (max-width:479px) {
    /* portrait smartphones */
}
@media screen and (min-width:480px) and (max-width:800px) {
    /* landscape smartphones, portrait tablets, narrow desktops */
}
@media screen and (min-width:801px) {
    /* desktop */
}

Media queries maintenance

Maintaining media queries instruction in your CSS files can quickly become difficult. Instead of consolidating media queries in a single place, we found it better to write media queries next to their relevant code in the CSS files. The cost of repeating @media instructions is low compared to the benefit of being able to review all relevant code at the same place.

Set a max-width for your images

While text content easily resizes, it is not the case for images that can easily overflow their container. A quick fix is to give your images a max-width attribute of 100%:

img {max-width: 100%;}

This fix has the huge advantage to be very simple and to cover the vast majority of use cases.

Forms

UGAL front-end interfaces include a fair number of forms (contact forms, blog comment etc...) as well as the very important checkout form. Those forms absolutely need to be optimized for mobile devices.

For our standard themes, the approach we have taken for form labels is similar to the technique described at codepen.io/chriscoyier/full/DmnlJ, where labels become top labels at smaller screen sizes:

@media screen and (max-width:800px) {
  label.fLabelFixed {
    width:100%;display:block;text-align:left;margin-left:0;padding:0;
  }
}

At the same time we make sure that the form fields themselves fit in the page:

input[type=text], input[type=password] {width:300px;max-width:100%;}

View source !

Our Red standard theme is fully responsive and is used by our demo website. Have a look !

Create a website

Try UGAL for free for 30 days

No commitment, no credit card required

Newsletter subscription