Editing HMTL Coded Buttons

[Stefan]

Hi GeneratePress,

I would like to edit GP Theme buttons associated with Memberful. I am talking about the following page: https://www.lifestyledemocracy.com/support/

I would like to:

1) Ensure the suggestion text inside the box “Choose your contribution” is visible on mobile as well. On my desktop it is visible, but on mobile I get the current view. https://prnt.sc/txb3qt

2) Make the buttons “I want to build” and “I want to contribute” round, just like the “Support” button.

3) Center the text box and the buttons associated with membership/payment.

I hope you can help out.

Regards,
Stefan

[Leo]

Hi there,

1. Try this CSS:

@media (max-width: 768px) {
    input[type=number]::placeholder {
        font-size: 14px;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

2. Try this CSS:

input[type="submit"] {
    border-radius: 5px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Stefan]

Hi Leo,

Thanks! And how, do I center all the content boxes? They are now left aligned.

[Leo]

Are you able to center those entire blocks for the Ultimate addons for Gutenberg plugin?

That would be the best solution.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Stefan]

Hi Leo,

Unfortunately, only partially.

The “Choose Your Contribution” and “I want to build” and “I want to support” buttons are HTML codes provided by Memberful. I do not have an option to center them horizontally.

The horizontal alignment for the the Ultimate addons for Gutenberg blocks works for the blocks above and below this HTML code block from Memberful.

The centering for the contents of the entire blocks (using Ultimate addons), encompassing all the blocks (including the ones from Memberful) is only available for vertical alignment.

This is the HTML code from Memberful and I don’t know how to make it aligned to the center. Maybe if I post it below you will be able to help out:

<form action=”https://lifestyledemocracy.memberful.com/checkout&#8221; method=”get”>
<input type=”hidden” name=”plan” value=”49681″>
<input type=”number” name=”price” placeholder=”Choose your contribution” required=”required” min=”48.00″ step=”1″>
<input type=”submit” value=”I want to build”>
</form>

[David]

Hi there,

edit the first line of the Forms HTML and add class="memberful-form" to it – so it looks like this:

<form class="memberful-form" action="https://lifestyledemocracy.memberful.com/checkout" method="get">

Then add this CSS:

/* Center form content */
.memberful-form {
    text-align: center;
}
/* Add some space between inputs */
.memberful-form input {
    margin-bottom: 1em;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Stefan]

Worked like a charm! Thank you 🙂

[David]

Glad to be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts