Call to Action button placement

[Gary Pfeffer]

Hi. When using the Encase Call To Action from Live Composer, the button is right under the text. There should be a little space between the button and the text. It doesn’t look quite right. Not enough white space. Particularly on a mobile phone or smaller device.

Attachments:

You must be logged in to view attached files.

[Bidur]

Hello Gary,

You can find the styling options within the live composer itself.
However here is a quick fix for you. Please add the following css inside the additional css section of your customizer and let us know;

#dslc-module-19535907cc7 #header-meta a.btn {
    margin: 20px 10px;
}
@media screen and (max-width: 998px){
    #dslc-module-19535907cc7 #header-meta {
        text-align: center;
    }
}

Thanks!
Bidur

[Gary Pfeffer]

The css code worked. But, the styling tab and responsive tab disappear when I clock on the edit button for the Call To Action block.

[Gary Pfeffer]

It would be nice to have. I would like to format a few other issues as well like left margin.

[Bidur]

Hello Gary,

Please specify the issue with the margin you mentioned above.
And also check if there is any conflicts/issue associated to the live composer you’re using.

Thanks!

[Gary Pfeffer]

Here is the margin issue photo. not enough whitespace on the left edge.needs padding.

By “checking for conflict issues with live composer”, are you saying i should turn off all other plugins and see if it still works?

Attachments:

You must be logged in to view attached files.

[Bidur]

Hello Gary,

No you don’t need to deactivate plugins. Can you send me your site url. All those spacing and margins may be override by live composer plugin you have used. So send us your site url so that we can send you code to override the issue you are having.

Thanks!

[Bidur]

Hello Gary,

To add space to left add following css

#post-481 #header-meta {
    padding-left: 20px;
    }

And to add space above button add following css

#post-481 #header-meta a.btn{
	margin-top: 20px;
}

Change the 20px number according to your requirement.

Thanks!

• This reply was modified 4 years, 3 months ago by Bidur.

[Gary Pfeffer]

#post-481 #header-meta {
    padding-left: 100px;
    }

Hi. I just tested this code from a few replies above. It doesn’t have any effect. I was on a PAGE type testing it out. I thought I would test it out on a POST type. To my surprise, LIVE COMPOSER isn’t an option for POST types. That doesn’t seem right. Do I have a larger problem?

[Bidur]

Hello Gary,

Could you please relocate it on your website? It’s difficult to track it since you seem to make the changes with your pages quite often.
Let us know.

Thanks!

[Author]

Posts