Useful CSS settings to make a description list look good on mobile phones

New option for Spacing and Indent

We are happy to use the Description List Block. Several possible areas of application on our customer’s Internet sites have already come together. We have updated our customer websites: CVs and Vitas, wine-, beverage- and menu cards for cafes and restaurants, and concept explanations for organizations and groups. We are even surprised at how often we have used our Description List Block.

At first, we just knew that we would need a block implementation for the Gutenberg editor, to be able to create Description List’s elements <dl>, <dd>, and <dt> faster and better. And right here was the first difficulty, three HTML elements allowed different variations. Since the first version, several drafts were needed until a basic framework was clear and a few straightforward options were implemented.

Within Gutenberg, it was already possible to quickly and easily create, modify, expand and maintain description lists, which is very important for some of our customers. But options for the design also play a decisive role in the Gutenberg Editor, which we would like to support for the individual configuration of description lists.

With the two new options “Spacing” and “Indent”, the spacing and the division can be set for one of the two styles.

Slider controler for the Indent Style.
<dd> elements get an indent from the left side.
Grid Style gets a Spacing option.
The Spacing divides the <dt> and <dd> element’s width in the set given ratio.

How to improve the mobile view

Funnily enough, many themes use the margin attribute here, so we only overwrite the margin with the Description List Block and we can ignore padding.

The term elements (dt) are explicitly assigned a margin-bottom: 0 and the description elements (dd) a margin-bottom: 20px.

In the desktop view the <dd> elements get a margin-bottom, even the division is made by left-right.
In the mobile view, the <dd> margin-bottom is visible while <dt> elements have no margin-bottom and the division is made from top to bottom and by element pairs.

Many layouts can be implemented using the settings for the margin. This means that if the two lists are assigned different sizes to elements, this affects the structure in the mobile view.

Just set <dt> margin-bottom to 0 and <dd> margin-bottom to 20px.

We are always excited about suggestions and project experiences like you would like to use the Description List Block. You can send us a pull request on GitHub or ask us something in the support forum on wordpress.org.