Skip to main content

3 posts tagged with "Responsive Design"

View All Tags

· One min read
Mattias Sander

Supercharge your tables in MadCap Flare using the DataTables JavaScript plug-in. As a bonus it makes your tables mobile friendly automatically.

Just add these tags to your template page <head> element:

<link rel="stylesheet" type="text/css" href="//">

<script type="text/javascript" src="//"></script>

<script type="text/javascript">
$(document).ready(function() {
let table = new DataTable('.myTable');

For more information, see

· One min read
Mattias Sander

When working with MadCap Flare, generating responsive HTML output is key for accessibility across various devices. The HTML <picture> element is an essential tool for this purpose, ensuring images in your documentation adapt seamlessly to different screen sizes and resolutions.

Simplified Approach

The <picture> element allows you to define multiple image sources for different viewing conditions. This flexibility is vital for technical documentation, where clarity and readability are paramount.

Usage in Flare

In your Flare project:

<source media="(min-width: 800px)" srcset="large-image.jpg"/>
<img src="default-image.jpg" alt="Description"/>

This code serves large-image.jpg for screens wider than 800px, with default-image.jpg as a fallback for smaller screens or unsupported browsers.


  1. Responsive Design: Tailor images to fit various devices, enhancing user engagement.
  2. Efficiency: Reduce the need for multiple image versions in your Flare project.
  3. Clarity: Ensure images are crisp and clear, regardless of device or screen size.

Incorporating the <picture> element into your MadCap Flare HTML output is a straightforward yet impactful way to elevate your technical documentation. It's an easy step towards creating more responsive, device-friendly content.

· One min read
Mattias Sander

Clamp demo

What is CSS clamp()?

CSS clamp() is a function for responsive font sizing in web design, adjusting font size within specified minimum, preferred, and maximum sizes based on viewport size.

Using clamp() in MadCap Flare

To use clamp() in MadCap Flare for web outputs, update your CSS with a rule like .dynamic-font { font-size: clamp(1rem, 2vw, 3rem); } and apply this class to elements in Flare.


clamp() is not applicable to PDFs generated in Flare; adjust font settings for PDFs separately.

Additional Resources