Overview tab table needs adjustment

[jcockroft64]

On mobile mode the trail details should not divide the line on a bad spot.

[jcockroft64]

In mobile mode, the distance "42 Miles" should be together on one line. Likewise the Duration "4 days" should be together on one line (in mobile mode). It displays well on tablet and desktop as is.

[russellelliott]

Added breaklines after the metadata titles. These only appear on mobile devices as to leave the layout on desktop and tablet unaffected.

Here is the HTML for the overview tab

<div class="primary">

    This is a 50 mile hike that we did from Twin Lakes to Tuolumne Meadows. It was a 6 day/5 night trip involved 50 miles of hiking 12,400 feet of elevation gain, and almost every meal was at a lake or river. This is highly recommended.
    <div style="height: 20px;"></div>
    <table class="overview">
        <thead>
            <tr>
            <th style="width: 45%;">Trail Details</th>
            <th>Features</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="padding-top: 10px;">
                    <p><b>Distance:</b> <br class="mobile-break"> 42 miles </p>

                    <p><b>Elevation Gain:</b> <br class="mobile-break"> 17,000 ft</p>

                    <p><b>Duration:</b> <br class="mobile-break"> 4 days</p>

                    <p><b>Difficulty:</b> <br class="mobile-break"> moderate</p>

                    <p><b>Overall:</b> <br class="mobile-break"> exceptional</p>

                </td>

                <td>
                    <button>dogs permitted</button>
                    <button>floral</button>
                    <button>lakes</button>
                    <button>mountain pass</button>
                    <button>trail quality</button>
                    <button>nobody</button>
                    <button>sumdm</button>
            </td>
            </tr>
        </tbody>
    </table>
</div>

Added this to the elementor custom CSS. This makes the linebreaks not appear on screens larger than phones.

@media screen and (min-width: 767px)  {
        .mobile-break { display: none; }
    }

Line break on mobile phone only https://stackoverflow.com/questions/37836821/line-break-on-mobile-phone-only

Here is what it looks like on mobile:

[jcockroft64]

Great. done.