How to edit existing columns?

Hello. I have a page with a bulletted list (http://www.tidessamui.com/on-the-beach/). The bullets are distributed over two columns, and as you can see, the columns break at an awkward location (see attached screenshot). How can I resolve this? I tried opening the page in the back end for editing. Specifically, the element in-question is called ‘Columnize’ in Visual Composer. But when I open it for editing, all I see is the bulletted list–there are no options I can see to even edit the number of columns, much less anything specific about their format.

Thank.

Hey There,

Would you mind providing us with login credentials so we can take a closer look? Please provide following information(Use Secure Note):

  • WordPress Admin username / password

All the best!

Hello There,

Thank you for providing the information. Since you have built the page with Visual Composer, you will have to edit it in VC. You will need to update the contents of your columnized section and make use of this as the contents:

<ul>
 	<li>CAR AND SCOOTER HIRE</li>
 	<li>MOUNTAIN BIKE HIRE</li>
 	<li>TRADITIONAL THAI MASSAGE &amp; TREATMENTS</li>
 	<li>SPEED BOAT/YACHT CHARTER</li>
 	<li>KITE BOARDING/SURFING</li>
 	<li>The internationally certified Kite Boarding school is located in Mae Nam, but please note that this is a seasonal activity &amp; only available from November to March.</li>
        <li class="empty"> &nbsp;</li>
 	<li>KAYAKS, PADDLE BOARDS</li>
 	<li>SAFARI DAY TRIPS</li>
 	<li>FISHING EXCURSIONS</li>
 	<li>GOLF</li>
 	<li>SCUBA DIVING</li>
 	<li>SUNSET CRUISES</li>
</ul>

After making your changes, if you are using CloudFlare or may have installed a caching plugin like WordFence, W3 Total Cache or WP Super Cache, please keep in mind that after doing every updates, always remember to clear all caches when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Please let us know how it goes.

Thanks for the reply. That did indeed keep the list entry from spilling over to the next column. But it created an new issue: a blank list entry (see attached screenshot). How can I resolve this?

Thanks.

Hi there,

Please add this code in the custom CSS:

@media (min-width: 828px) {
     li.empty {
        height: 25px;
        list-style: none;
    }
}

Hope this helps.

Thanks very much for the reply. But that CSS is still undesirable, as it leaves a blank line at the top of the second column.

Let’s consider this resolved. I should be able to implement a CSS solution to this myself.

Thanks,

Carl

Hi Carl,

Sure, I also confirmed that it’s okay now.

Thanks!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.