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. A number of possible areas of application on our customer’s Internet sites have been already come together. We have updated for 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 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, in order to be able to create Description List’s elements <dl>, <dd> and <dt> faster and better. And right here was the first difficulty, there were three HTML elements that allowed different variations. Since the first version several drafts were needed until a basic framework was clear and a few very simple 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 get a Spacing option.
The Spacing divides the <dt> and <dd> elements width in the set given ratio.

How to improve the mobile view

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

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

In the desktop view the <dd> elements get a margin-botton, 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 has an effect on 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.