How to Customize the Mobile or Responsive Views

Tutorials  Last Updated: Time to Read: 2 minutes

Responsiveness or “Adaptive design” is a core design concept in our themes that allows them to dynamically resize to fit common screen-sizes. This design structure is responsible for re-arranging content, scaling down images, scaling up text and changing how some features behave in order to optimize their readability and usability on mobile devices. To learn more about responsive design and why it is used, visit Ethan Marcott’s flagship article here.

The mobile views in Layers are achived by using media queries, which are special instructions in CSS that tell the browser when to apply specific styling to elements based on the size of the browser window. Naturally this must assume your visitor has their browser window full-screened or set to a “standard width,” so if you window your browser and simply expand and contract it wildly, you may or may not hit one of the thresholds

Customizing the mobile view requires you to evaluate the existing styling of the element when viewed at the screen size you want to customize, then apply your custom CSS using the right media query. This custom css can be stored in the CSS panel of the Customizer for use on a single install or as part of a style kit’s CSS, or in a child theme stylesheet. In either case, it should always be at the bottom, following all styles that do not use a media query.

All modern browsers come with a Browser Inspector with an amazing Responsive Design view to help you test in a variety of mobile screen sizes, which we recommend using for this exercise. You can also use emulators in combination with an online tool such as Responsinator or Google Resizer, covered in more detail in the Mobile testing article linked at the end of this post. See the following article to learn more about how to use the browser inspector while in the Customizer: CSS Styling Using the Browser Inspector & Customizer

The media queries for your theme are found in the responsive.css document, which you can view from this link for reference. Don’t edit this file on your install or copy it over entirely. Instead, reference the media query and any relevant styles from the inspector to build your custom styles. Below is an example of how a media query for a standard hand-held smartphone looks, with a single style to adjust the logo when viewed on smartphones:

Following is a media query template you can use which corresponds to the test views over at http://www.responsinator.com. Your Custom CSS goes between the comments inside each query

If you are a pro setting up a child theme or Style Kit for layers, check out the DevKit plugin, which adds enhanced CS and JS editing to the Customizer, along with Layers mobile preview buttons. This plugin is absolutely essential for quickly and easily creating custom css for mobile styles, as it automatically builds out the stylesheet and includes the correct media query overrides for the code entered into each view’s panel. Learn More about DevKit here or download it here