How reading the API docs and examples can help solving an issue?

How reading the API docs and examples can help solving an issue?
MJML Template

For a project, we are using MJML library to build our email templates. It's responsive by design and easy to learn. The only issue I am having is the complexity of using partials, that is, using a separate file for header for instance, and then integrating it in other templates. That's something trivial to do with library such as Handlebars.

MJML nevertheless enables you to use the handlebars syntax or other UI library, but for me to go and search for ways of achieving that is out of my scope. However, using partials is the most effective strategy.

The main problem I am having with the responsive padding when adding images with mj-image tag. The requirement is that the two logos should be separated with whitespace, without padding left or right respectively.

|Logo1               Logo2|

With MJML:

|  Logo1         Logo2   |

I try experimenting with my current experience with CSS but no difference.

This went on for a few weeks until recently I decided to peak around the templates for inspiration.

I know it's a responsive framework, but given the complexity of Microsoft Outlook, I doubt that flex are used.

By looking at the APIs and the template examples on the official site, I stumble upon the use of width in percentage. It's been a long time for me that I didn't do any HTML and CSS.


As a result, the header is divided into three parts, the first and last one with the logos without any padding - as expected. In the centre is present an empty space. This is a solution I often used with flexbox when designing responsive components.

The lesson learnt therefore for me, is not to hesitate reading the API docs and if present, looking at examples - often just to get a grasp of what is present or not.