Virtue, Page Builder and Easy Google Fonts

Hmm..not sure. Can you post a link? What exactly are you trying to do?

Hannah

Depends whether your familiar with Google Easy Font Plugin, if you are you’ll know to adjust specific text, as opposed to theme text (which works OK in Virtue with all it’s features), it is necessary to use CSS selector e.g. <span class=”headline”>EXPLORE </span> in Visual Editor, in text mode and then this text is available to adjust. When you do this in Virtue the font, size, color, left, right, letters spacing all work but top, bottom, margin and padding doesn’t and I wondered if there was something in Virtue coding preventing this and if there was any way to get this work in virtue, as it does in other themes?

Can you post a link. I am not familiar with this plugin but If I can see the page I can see what code might be causing the conflict.

Kadence Themes

Can’t send a link to a website page, as I only have it as a local installation, on my laptop but it the same problem using Kadence Virtue, Pinnacle and Site Origin Vantage (maker of Page Builder)themes. Top and bottom, margin/padding doesn’t work but left and rigt does along with the other controls/settings? However it does work on Tessaeract theme and Page Builder by Tyler More which makes me think there must be something in these themes preventing top and bottom margin/padding being added? The plugin is readily available through the WordPress, Add a new Plugin.

Hey,
So I installed the plugin and started testing. I had no problem with the margin top and bottom. Then I saw that you are using

<span class="headline">EXPLORE </span>

A span item is an inline item. You can’t have margin top and bottom on an span item. It won’t take effect because it’s displayed inline. You need to make the item display block or inline-block for a top and bottom margin to take effect.

https://stackoverflow.com/questions/11700985/margin-top-not-working-for-span-element

Kadence Themes

Well this is very odd as the span class works in the Tessaeract theme allowing bottom and top margin to be added with Easy Google Font. As you downloaded the plugin and got it to work with display block or inline-block, please show me an example of the CSS you used?

<div class="headline">EXPLORE </div>

It’s possible the Tessaeract theme forces span tags to be inline block… that would be really crazy to do but I don’t know that theme, you would just target

span {
display:inline-block;
}

Kadence Themes

So do you mean go to Appearance, Advance in the Virtue Theme and add
span {
display:inline-block;
}
in the Custom CSS Box and if so, will it not effect anything else adversely, in the Virtue Theme?

No I don’t recommend doing that, was only saying that might be why the the Tessaeract was adding margin top to a span tag. I recommend you either use a blocking element.. like above with the <div>

Or you can target the class “headline” and add inline-block:

like this:

span.headline {
display:inline-block;
}

Kadence Themes

As you’ve gathered I know very little about CSS and it would appear that the Tessaeract theme instructions (which introduced me to Easy Google Fonts) has confused the issue. So thanks for putting me straight and all your help with this.

I looked at the Tessaeract theme. They make all span items “display:inline-block” which is not there default function and a little odd for theme to do in there css.

Kadence Themes

I see or should I say I don’t see but I`ll take your word for it. It’s very confusing for a novice like me. I was attracted to Easy Google Font’s (GEF) ability to change font properties without knowledge of CSS and came across the plugin from the Tessaeract theme but much preferred the Virtue Theme, which I had been using before and thought it would be great to use GEF with it and that’s, through my ignorance, is where my problems started. I then checked it out with other themes same problem and thankfully due to your efforts you’ve identified the reason and I’ll be able to continue using Virtue and GEF. I’ve found Virtue to be a great WordPress theme and am very satisfied with it. Once again thanks for sticking with me and sorting this.

Your welcome.

Kadence Themes

I have upgraded to latast wp version. Everythink is OK. Thank you!