Braad

Glad it is now working for you!

Hello Ari,

The json-api plugin that you mentioned is fairly old, while the rest-api plugin is the official WordPress REST API, and already part of it is in Core and the first endpoints are scheduled to go into Core in 4.7, so I would definitely use https://wordpress.org/plugins/rest-api/.

Best of luck,
-Braad

Hello Maas31,

Thank you for downloading Plugin Cards, but I don’t think it is the plugin you want to use for what you are trying to do.

Plugin Cards lets you show information about WordPress plugins that are hosted in the WordPress plugin repository. It doesn’t let you output anything related to posts on your blog.

Generally speaking, the visual look of your website comes from the theme you are using, so if you want your posts to look more like cards, I’d recommend switching to a theme that includes styling for posts like you want. Here’s an example of a theme I just found that includes styling for posts that makes them look like cards: https://wordpress.org/themes/pixelhunter/.

I wish you the best of luck with your website 🙂

Thanks. Just to be clear, are you trying to equalize the height of the video and the box on the right at the top of the page? If so, this will be tricky as the video has a fixed aspect ratio, so we can’t increase the height alone with stretching the video beyond its native resolution (the width would need to increase too, which would cause the video to jump out of its column).

Because the video is shorter than the content on the right, I would focus on trying to vertically center the video on the left relative to the content on the right. I actually wrote another plugin called Vertical Center that does exactly this: https://wordpress.org/plugins/vertical-center/

For that you might try a selector in Vertical Center of

#home .columns.six

It would be preferrable to get a custom class on the column, so in Visual Composer you can click the edit pencil on the column and at the bottom of you’ll see an input for custom class, add something there and then your selector would be:

#home .custom-class

Back to Equal Height Columns, again I would put a custom class on both of the columns you want to equalize, then try

#home .custom-class

But I believe with the latest release of Visual Composer there is now an official way to equalize the heights of columns in a row. I believe it is a checkbox option on the row. Try editing the row and see if such an option is there, and use that if it is. You probably won’t see any visible change though, because again the video isn’t going to stretch taller unless you force it to, and the content on the right can’t get shorter, so this is why I’d try to just vertically center the video against the content on the right rather than worry about equalizing the heights.

I hope this information helps. Let me know if you have any more questions.

Hello again hixmyrick,

After some more investigation, I believe the issue is explained here: http://stackoverflow.com/questions/19316623/call-class-method-from-inside-array-map-anonymous-function

It appears that the fatal error will only happen if you’re on PHP 5.2 or older. If you can update your PHP version then this should fix the issue. We’re still going to try to update the plugin with a fix for PHP 5.2, so you can look out for that also.

Sorry for the issue, and thanks again for the report!

Hello jcsnider,

The way your menu looks on small screens is 100% determined by how your theme presents the menu and how many items you have in the menu. If your theme presents the menu in a particularly long format you can always manipulate this with CSS. You can either hide the entire menu on mobile, or hide all sub-level menu items, or tighten up the spacing between the items, or with some JS you can even have the sub levels slide open and closed when the top level items are clicked.

If you can provide a link to the page on your site where the issue can be seen and explain exactly how you want to fix it (like hiding sub level menu items or hiding the menu completely), I can reply with the CSS you’d need to do what you are wanting. Otherwise if you do some Googling for CSS I think you’ll be able to figure it out. It’ll likely be something like .primary-nav ul.sub-menu li { display: none; }.

-Braad

Bwickert,

I haven’t heard from you since my last reply, so I’m going to mark this issue as resolved, but feel free to reopen it if there is still an issue I can help you with. 🙂

-Braad

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