Mastering the Hide and Show Technique using Media queries in CI360 Layout Manager

1 Like

In today’s world, people read emails on every type of screen imaginable — from large desktop monitors to small mobile devices. As a marketer, ensuring that your emails look perfect everywhere is crucial. One of the most effective methods for achieving this is the Hide and Show technique, which allows you to customize email content for different devices without relying on customer data.

What is the Hide and Show Technique?

The Hide and Show technique uses CSS media queries to selectively display or hide content blocks in an email. Instead of sending separate versions for desktop and mobile, you can build a single email that adapts its layout and content based on the screen width.

On desktops, you might display more detailed graphics or wider layouts.
On mobile, you can hide bulky content and instead show simplified versions optimized for smaller screens.

This not only improves readability but also creates a smoother experience for recipients.

How It Works

At its core, the technique relies on CSS properties like display and visibility alongside media queries.

Example Media Query

@media screen and (max-width: 479px) {
  .hide-mobile {
    display: none !important;
  }
}

Here, any content tagged with the .hide-mobile class will disappear on screens smaller than 479px, making it invisible on most mobile devices.

Hiding Content

Use display: none; to hide elements completely.
For Outlook compatibility, add mso-hide: all; to ensure tables and their contents stay hidden.

Showing Content

Use display: block; to reveal hidden elements.
Reset other constraints with rules like max-height: initial !important; and width: auto !important;.
Set visibility: visible !important; to ensure content displays correctly.

Implementing Hide and Show in CI360

The following steps will take you through the process to hide and show content in CI360 while maintaining CI360 email layout manager compatibility.

Step 1: Build the email as per your design including both the desktop and the mobile version in the layout manager.

Step 2: Once you are happy with the email click Ok and Click Save as template and choose the HTML file option.

Step 3: Open the downloaded HTML file in a text editor, inside the CSS style tag navigate to the media queries for mobile.

Step 4: Copy and Paste the below classes inside the media query for mobile width.

.no-mobile {

display: none !important;

}

.mobile-show {

display: block !important;

max-height: initial !important;

width: auto !important;

line-height: normal !important;

visibility: visible !important;

}

Note: Ensure that the classes are not added inside any other CI360 generated classes and are within the brackets of the media query for mobile as shown below.

Step 5: Hide the content for desktop in mobile devices by calling the .no-mobile class in the wrapping table for the desktop content. Since the table already has some classes we do not need to use the class attribute, we can add the no-mobile class with the existing classes inside the class attribute.

Step 6: Hide the content for mobile by adding the below properties inside the inline style attribute of the wrapping table for mobile content. Since the table already has some styles we do not need to use the style attribute, we can add the additional styles with the existing styles inside the style attribute.

mso-hide: all; overflow: hidden; max-height: 0; width: 0; display: none; line-height: 0; visibility: hidden;

Step 7: Show the content for mobile only in mobile by calling the . mobile-show class in the wrapping table for the mobile content. Since the table already has some classes we do not need to use the class attribute, we can add the mobile-show class with the existing classes inside the class attribute.

Once you are sure that all the changes are correctly applied, save the HTML file.

Step 8: In the layout manager Click on the Select template option in your email task and select Yes, from the dialog box select the From HTML file option and choose your updated HTML file from your system and click Done.

Step 9: Once the HTML file is uploaded as a template, you will only see the desktop content in your layout manager, click on Edit content option to open email editor.

You can make changes to the content for desktop in your layout manager using the options available for the respective element you have selected.

Step 10: You can also see a dotted line where the content for mobile should have been, click on the line to open the hidden content block in case you need to make any changes to the mobile content, You can make changes to the content for mobile in your layout manager using the options available for the respective element you have selected.

Step 11: Once the changes are complete, click ok and save the task, use the Responsive previews option in the Review tab to make sure the content is changing for mobile and desktop devices.

Desktop View :

Mobile View :

You can also save the email as a template for future use using the Save as template option in the content tab.

Notes:

You can only make changes to the element you have added the custom classes to, if you delete the element and add it again the classes will not be added automatically to the new element.

In the above example the text element is used to show the Hide and show technique but the same applies to all the elements available in the layout manager.

Do not use the custom HTML or the Dynamic content elements to add the content block using the Hide and show classes directly into your template, instead use the template option shown in the example because the Custom HTML element and the Dynamic content element wraps the content you are adding in a wrapper table.

If you have multiple elements that you wish to hide or show in desktop or mobile use the Element group option in the layout manager and make sure to apply the classes to the main wrapper table for the element group.

Final Thoughts

Responsive design is no longer optional — it’s a necessity. With the Hide and Show technique in CI360, you gain more control over how your audience experiences your brand, regardless of the device they use. A little extra effort in setup goes a long way toward ensuring higher engagement and stronger campaign performance.