Hide or Show Content by Device Size

In this article, we're going to explain how to achieve a reponsive website using the hide/show element feature of the X and Pro themes.

  1. Where to find the Hide During Breakpoint options
  2. Previewing at different device sizes
  3. Example: Using different navigation Elements in a Pro Header
  4. Breakpoint Helper Classes
  5. Summary

Responsive design is one of the necessities of the world wide web these days and being able to view the website on all sort of devices curated for the device is a big challenge. The X and Pro themes are responsive out of the box, that means the auto-generated codes and styles will sit beautifully on mobile, tablet, laptop and desktop devices. Having said that, there is also Cornerstone in X and Content, Header and Footer builders in Pro which give many options and elements to add content. The content you may add to the website might not necessarily be suitable for all kind of devices and that is where the hide/show feature of the builder elements in different screen widths come into play.

Where to find the Hide During Breakpoint options

The Cornerstone, Pro Content, Header, and Footer builders have an option to Hide/Show different sections of the content based on the screen size of the viewer device. The option creates an opportunity to hide the sections which don't fit on mobile devices or don't have a good view on big screens. Follow the steps below to find these controls for any element.

Inspect Element
  1. Inspect any Element by clicking on it, or clicking the magnifying glass icon
  2. In the Control Navigation, click Customize. If Advanced Mode is enabled this will take you to a separate tab, otherwise it will scroll you to the bottom.
  3. Scroll down to find the options to hide the section based on screen size.
  4. Click device icon(s) for the screen sizees at which you wish to hide this element.
  • Extra Large (above 1200px)
  • Large (between 980px and 1099px)
  • Medium (between 768px and 979px)
  • Small (between 481px and 767px)
  • Extra Small (below 480px)
Breakpoint control

Note: While this functionality is available on the majority of elements, there are exceptions. For example, Raw Content does not have a wrapping div, so there is not a way to attach a breakpoint control. See the section below for instructions on using a helper class to bring this functionality into places not powered by our elements, or where it is otherwise unavailable

Previewing at different device sizes

In the Bar, click the mobile device icon to toggle the preview switcher.

Mobile Preview Toggle

You will see the switcher appear over the canvas. Click any of the device icons and the preview frame will be set to that width.

Mobile Preview Button

Note: It is possible to have the XL breakpoint selected, but in actuality be seeing the LG (or smaller) breakpoint because your screen width is under 1200px. To avoid this, you can try increasing the size of your browser, using browser zoom, or using a bigger display.

Example: Using different navigation Elements in a Pro Header

One case of where this feature is useful would be using an inline navigation on desktop, and a toggleable menu on mobile. You can do this by following these instructions.

  • In your Header, add a new Bar. We are using the Top region for this example
  • Add two Containers to this Bar.
  • Double click the Container title to rename the elements for convenience. We will call them Mobile Container and Desktop Container
  • In the Desktop Container, add a Navigation Inline element.
  • In the Mobile Container, add a Navigation Collapsed element.
Mobile Container
  • Inspect the Mobile Container and navigate to the Customize Settings
  • Click the first three breakpoint icons to hide the Container at those device sizes
Hide on Desktop

Notice how the Inline Navigation disappears. Next we will configure the Desktop Container.

Desktop Container
  • Inspect the Desktop Container and navigate to the Customize Settings
  • Click the last two breakpoint icons to hide the Container at those device sizes
Hide on Desktop

At this point, you will only see one of the Containers at any given screen size and have created two different navigations that appear at different sizes.

Breakpoint Helper Classes

X and Pro also include include helper classes you can put in any custom HTML. The five classes are respective of the five different breakpoint sizes.

  • x-hide-xl
  • x-hide-lg
  • x-hide-md
  • x-hide-sm
  • x-hide-xs

Here is an example of using this to hide a custom div on the XL and LG breakpoints.

<div class="x-hide-xl x-hide-lg">
  <!-- Custom HTML -->
</div>

Summary

We've discussed the hide/show feature of the X and Pro themes which enables you to hide or show specific parts of the builders depending on the screen size which the visitor views the website. We covered practical example of using the feature in the header builder. Finally, we went over some helper classes to use this functionality in other areas.

See something inaccurate? Let us know