Audience: Builder

Read time: 2 min

Article contents: How to steps

This guide will show you how to change the display of your specification images to have them pinned to the top of the category.

Steps

First you will want to click on the Specifications section to make that active:
Once that is active, you will want to click on Advanced Editing:
You will then be presented with the following screen. You will need to click on the highlighted area to target that area:
If you have selected it correctly you will see a window pop out 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.
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-left: 10px;
            padding-right: 10px;
            background: white;
            margin: 0 10px;
        }

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

        .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-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;
        }

        .header-images {
            page-break-inside: avoid !important;
        }

        .specification-item {
            margin-bottom: 25px;
        }

        .keep-together {
            page-break-inside: avoid;
        }

        @page {
            size: a4;
            margin: 35px;
        }
    </style>
</head>
<body>
    <div style="background-color: #f6f7f7; padding: 0px 10px 10px 10px">
        {{#estimateSpecifications}}
        <div class="specification-item">
            <div class="keep-together">
                <div class="header-images">
                    <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 (isNotNullAndEmpty 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>

                <div class="specifications-wrapper-table specification-category-gap" style="padding-top: 30px">
                    <table class="font-row specifications-table">
                        <!-- Keeps the top 2 specifications attached with header avoid page break right after header -->
                        {{#specifications}} {{#if (indexLessThan 2)}}
                        <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: 85%">{{specification}}</td>
                        </tr>
                        {{/if}} {{/specifications}}
                    </table>
                </div>
            </div>

            <div class="specifications-wrapper-table specification-category-gap" style="padding-bottom: 20px">
                <table class="font-row specifications-table">
                    <!-- All the specifications except top 2 are displayed in a list below header-->
                    {{#specifications}} {{#if (indexGreaterOrEqual 2)}}
                    <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: 85%">{{specification}}</td>
                    </tr>
                    {{/if}} {{/specifications}}
                </table>
            </div>
        </div>
        {{/estimateSpecifications}}
    </div>
</body>
</html>

Result

This should allow your specifications to appear like the following: