Create a responsive size chart page using flexbox

Example desktop:

Example tablet:

Example mobile:

The concept uses individual divs for the content. Flexbox makes the div sections responsive. Some tables can be hard to read when using a mobile device. Sectioning your information into divs can help display the content grouped which works well for all devices. 

How-to:

If you're creating a page, use the following code in the code view of your Rich Text Editor:

https://shopify.com/admin/pages

Once in HTML/code view, you can paste the code in:

Notice how the toolbar icons have disappeared as well, that indicates you're in HTML/code view.

Sample size chart page code. Use this for the HTML (this builds the samples shown above):

<div class="flex-container size-chart"><!-- start flexbox -->

<div>
<p>BELT SIZE</p>
<p><strong>95</strong></p>
<p>SIZE EUROPE TROUSERS</p>
<p><strong>42/44</strong></p>
<p>SIZE US / UK TROUSERS</p>
<p><strong>30/31/32</strong></p>
</div>

<div>
<p>BELT SIZE</p>
<p><strong>95</strong></p>
<p>SIZE EUROPE TROUSERS</p>
<p><strong>46</strong></p>
<p>SIZE US / UK TROUSERS</p>
<p><strong>33/34/36</strong></p>
</div>

<div>
<p>BELT SIZE</p>
<p><strong>100</strong></p>
<p>SIZE EUROPE TROUSERS</p>
<p><strong>48/50</strong></p>
<p>SIZE US / UK TROUSERS</p>
<p><strong>38/40</strong></p>
</div>

<div>
<p>BELT SIZE</p>
<p><strong>105</strong></p>
<p>SIZE EUROPE TROUSERS</p>
<p><strong>52/54</strong></p>
<p>SIZE US / UK TROUSERS</p>
<p><strong>42/44</strong></p>
</div>

</div><!-- end flexbox -->

Save the file.

Add flexbox CSS to style grids

/* -- code to for flexbox size-chart -- */

.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.flex-container.size-chart>div {border: 1px solid #dddddd;
margin: 5px 2px;

}
.flex-container>div {
    padding: 10px;
}
/* - end - */

You can modify the HTML page code for your sizes and titles. Keep each one in it's own section using the sample format. Make sure you start your code with the very first line and end with the last line. Those are required for start flexbox and end flexbox. The rest is content sectioned in divs. 

More about flexbox:

https://www.quackit.com/css/flexbox/examples/

Where to add the flexbox style code:

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code