This guide will show you how to change the display of your specifications from this to this:

Steps

  1. First you will want to select the Specifications section to make that active:

2. Once that is active, you will want to select 'Advanced Editing':

3. You will then be presented with the following screen. You will need to click on the highlighted area to target that area:

4. If you have selected it correctly you will see a window popout from the left that will show you the HTML of that section:

In that HTML textbox on left, you will want to highlight all the HTML in there and delete it.

5. You will then want to Paste the following HTML into that same box

<html>
<head>
<style>
td{
padding: 0px !important;
}
.u-col-100 {
min-width: 320px !important;
max-width: 950px !important;
}
.specifications-wrapper {
display: table;
padding: 10px;
background: white;
margin: 0 10px;
}


.specifications-wrapper-table {
padding: 10px;
background: white;
margin: 0 10px;
}

.specifications-item-wrap {
flex: 0 0 20%;
display: inline-block;
page-break-inside:avoid !important;
}

.specifications-item {
background: white;
margin: 10px;
flex: 1;
page-break-inside:avoid !important;
max-width: 170px;
}

.specifications-image-padding {
padding: 35px;
border: 2.5px solid #DCDCDC;
}

.specifications-row-odd:nth-child(odd) {
background-color: #EDEEF0;
}

.specifications-row-even:nth-child(even) {
background-color: white;
}

.specifications-table{
width: 100%;
border-collapse: collapse;
page-break-inside:auto
}

.specifications-body {
background-color: #F6F7F7;
padding:0 10px;
color: #525d6c;
}

.specifications-row-data{
padding: 10px !important;
color: #525d6c;
}

.specification-category-gap {
margin-bottom: 25px;
}

.specification-table-row {
page-break-inside:avoid; page-break-after:auto
}

.specifications-image {
max-width: 100%;
max-height: 100%;
margin-left: auto;
margin-right: auto;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.specifications-image-div {
width: 160px;
margin: auto;
height: 150px;
border: 3px solid #DCDCDC;
page-break-inside:avoid;
margin-bottom: 5px;
position: relative;
}

.font-heading {
font-size: 22px
}

.font-subheading {
font-size: 16px
}

.font-row {
font-size: 14px
}



</style>
</head>
<body>
<div style="background-color: #F6F7F7; padding: 10px">
{{#estimateSpecifications}}
<div class="font-heading" style="margin: 0 10px; background-color: #DCDFE2; color: #525d6c; padding: 15px;font-weight: bold; font-family: Arial; page-break-inside:avoid;">
{{category}}
</div>

<!--
<div class="specifications-wrapper">
//{{#specifications}}
{{#if (isNotNull imageUrl)}}
<div class="specifications-item-wrap">
<div class="specifications-item">
{{#if (showSpecsNumber)}}<div style="font-size: 14px; color: #525d6c"> Ref: {{specificationNumber}} </div>{{/if}}
<div class="specifications-image-div">
<img class="specifications-image" src="{{imageUrl}}">
</div>
<div class="font-row" style="text-align: left;">
<span style="font-weight: 700; color: #525d6c">{{specification}}</span>
</div>
</div>
</div>
{{/if}}
{{/specifications}}
</div>
-->

<div class="specifications-wrapper-table specification-category-gap" style="padding-top: 30px; padding-bottom: 20px; ">
<table class="font-row specifications-table">
{{#specifications}}
<tr class="specifications-row-odd specifications-row-even specification-table-row">
{{#if (showSpecsNumber)}}<td class="specifications-row-data" style="width: 15%;">Ref: {{specificationNumber}} </td>{{/if}}
<td class="specifications-row-data" style="width: 40%;">{{specification}}</td>
<td class="specifications-row-data" style="width: 45%;">
{{#if (isNotNull imageUrl)}}
<div class="specifications-image-div">
<img class="specifications-image" src="{{imageUrl}}">
</div>
{{else}}

{{/if}}
</td>
</tr>
{{/specifications}}
</table>
</div>
{{/estimateSpecifications}}

</div>
</body>
</html>


Result

This should allow your specifications to appear like the following:

Did this answer your question?