Hello DanDybkaer,
This plugin works in a simple way. You enter a CSS selector on the options page, and any elements that match the selector will be given the same height.
Finding the right CSS selector is the challenge. If you aren’t familiar with CSS selectors, I recommend doing some Googling for “CSS selectors”, “CSS tutorial”, etc. It’s a big topic but it is a core concept in web development, and I’m confident you’ll be able to understand it with a little bit of time and practice.
The absolute minimum you need to know is that a selector that starts with a # character selects the element that has a matching id attribute. So HTML like
<div id="thing-1">...</div>
would get selected by #thing-1. And selectors that start with a . character select elements that have a matching class attribute. So HTML like
<div class="thing-2">...</div>
would get selected by .thing-2.
You have to be careful with class selectors, because often several elements on the page will have the same class, and this plugin will equalize the heights of any elements matching the selector, even if there are many of them.
You can enter multiple selectors on the same line on the options page in order to create a collection of elements to equalize. This is done by separating them with a comma and space. For example, a selector like #thing-1, .thing-2 will match both of the divs I mentioned above.
If you paste your HTML in between backtick characters, I’ll be able to see the whole thing. Right now it looks like an incomplete snippet, and I can’t really get a sense of what you’re trying to equalize the heights of.
I’m happy to help you get this plugin working. I can either help you by pointing you in the right direction of things you can Google to get the information you need to find the right selectors, or if you can send me a link to your page and explain clearly what elements on the page you want to equalize the heights of, I can take a look and recommend some selectors to try. Either way is fine, let me know what is best for you.
One final note, right now you have like
<div class="EqualHeightColumns-2 panel-widget-style">...</div>
Both classes and ID should not be capitalized, and should be generally words separated with hyphens, so the more correct class name here would look like
<div class="equal-height-columns-2 panel-widget-style">...</div>
Based on the HTML you included, I would recommend trying to select by ID rather than class, since you already have usable unique IDs like pgc-30-15-1 that should only match one thing. This ID would be selected by #pgc-30-15-1, and my best guess at the final selector you’ll need would be #pgc-30-15-0, #pgc-30-15-1.
-Braad
