[Steven Zahm]

@ Debbie

RE: I use a theme that has a builder in it, similar to visual composer. When I insert the shortcode in a standard text field, the card does not display correctly at all

Unfortunately this is impossible for me to know what the issue is from looking at the screenshot… my best guess is that the theme’s page builder is not correctly processing WordPress shortcodes. It looks like it might be telling the shortcode to output before its is supposed to. perhaps the theme builder is not meant to use shortcode in its text area content blocks … does it have a shortcode block?

RE: When I do not use the builder and place it in the standard wordpress field, it displays too high and under the header.

What do you mean by standard WordPress field? The post content area? If that is the case, I suspect you have a static header and the theme has not properly pushed the page/page content area down to account for the static header height. I would look for a margin/padding option in the theme. If it is a visual builder, I certain it has one somewhere in its settings.

RE: I would like to change the size of the business card. So far I have not found where this can be done.

Here’s the link to the docs which explain how to change the tile size.

RE: I have worked my around the header issue, although it still does not work in the builder technology.

Good to hear you got it working! I took a look at your site… I see you are using Themify. Connections does work fine it in as I’ve assisted other users who were using their themes. It, like just a theme design setting that needs tweaked or perhaps a different content block should be used.

RE: However, with the size of the font size is way to small. Can I customized which field displays at different font sizes?

The font size was chosen to be this size so the default info would fit within the small card size. If you wish to increase the size, it can be done with CSS.

Add this following to the theme’s custom CSS area:

#cn-tile-plus .cn-entry,
#cn-tile-plus .cn-entry .fn {
    font-size: 16px;
}

Tweak the size as desired.

RE: without me reverse engineering the CSS values, I would like to center it and place a label in front of it. Do you have an easier way?

Nope, CSS is the only way. Here’s the CSS:

#cn-tile-plus span.cn-search label {
    margin-right: 8px;
}

#cn-tile-plus span.cn-search {
    display: block;
    float: none;
    margin: 0 auto;
    text-align: center;
}

#cn-tile-plus .cn-search label {
    display: inline;
}

It does appear that some custom CSS has been applied breaking the visual style of the search input, you’ll have to remove that to correct its display.

Hope that helps, let me know