installed plugin, now how to use it?

Hello @mandrill2000

All you need to do is enter the right selector on the settings page. The selector should match either an id or class attribute on the HTML elements that you want to equalize the heights of.

In your example, the shortcodes [su_row] and [su_column] will expand into HTML elements on the front end of the site, and hopefully they have a unique class or id that you can use. You’ll want to check out the HTML on the front end of your site by either right clicking on the screen and selecting “Inspect Element” or “View Page Source” and then find the right HTML for the columns. It will likely look something like this:

<div class="row-1">
    <div class="col-1 column">Column Content</div>
    <div class="col-2 column">Column Content</div>
    <div class="col-3 column">Column Content</div>
</div>

The selector you enter on the settings page should match the elements that you want to equalize the heights of, so for this HTML the selector would be “.row-1 .column”, which says “Find the element with the class ‘.row-1’, then look inside it and match child elements with the class ‘.column'”

If you can share a direct link to the page on the front end of your site where you’re trying to get it working, or if you can share the HTML that your shortcodes turn into, I can recommend what specific selector you’ll want to use to get it working.

I hope this information helps. Thanks for using Equal Height Columns!

thanks for your reply, I appreciate it!

here is the link page I want to establish equal column widths to.

https://www.crashdancers.net/index.php/crashdance-fridays/

thanks in advance for you help!

Jay

Thanks for sharing the URL. I can see that the plugin is working and the selectors that you are using are very close to correct. Right now your selectors are:

.su-row .su-column-size-2-3
.su-row .su-column-size-1-3

But you actually want to use:

.su-row .su-column

The idea is that a single selector should match multiple elements and then equalize the heights of all the matching elements. With your selectors you were only matching one element with each selector, so the plugin didn’t have a second element to compare it to.

There are, however, some other issues on your page that you’ll need to fix before you get the result that I think you want. Using the selector I mentioned above will equalize the height of the columns, but in your case your div that has the background color is not the column div, it’s one of the child divs. You could do height: 100%; on .su-column-inner and then add box-sizing: border-box; to your div with the background color. That gets you most of the way there. There is also a JavaScript error showing in the console Uncaught ReferenceError: ajaxurl is not defined that may prevent the JavaScript that Equal Height Columns needs from running. It looks like that is coming from a plugin called WP RSS Aggregator.

Best of luck.

-Braad

Hello @mandrill2000,

We haven’t heard from you for a while, so I’m going to mark this issue as resolved, but feel free to reopen if there is anything more we can help you with. ??