Payment button text – vertical align issue OceanWP theme

wordmax
(@wordmax)

3 years, 6 months ago

Payment button text is not aligned vertically correctly in OceanWP theme. This is one of the most popular free themes for WordPress. Tested with other themes like Astra and payment button text vertical alignment seems ok.

I won’t expect any response from the developer based on previous lack of response to my support inquiries. But who knows. Maybe they will address this issue.

Thanks.

The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

Thread Starter wordmax
(@wordmax)

3 years, 6 months ago

And CSS for button padding-bottom has no effect.
.asp_product_buy_btn span

Thread Starter wordmax
(@wordmax)

3 years, 6 months ago

Seems like button CSS design ability is pretty basic simple need for admins, should probably be included in the settings. Not an add-on feature.
Plugin Support mbrsolution
(@mbrsolution)

3 years, 6 months ago
Hi,

Unfortunately we don’t control themes functionality. However your issue is coming from the following code. It is the 14px that is causing the problem.
```
input[type="button"], input[type="reset"], input[type="submit"], button[type="submit"], .button, body div.wpforms-container-full .wpforms-form input[type=submit], body div.wpforms-container-full .wpforms-form button[type=submit], body div.wpforms-container-full .wpforms-form .wpforms-page-button {
    display: inline-block;
    font-family: inherit;
    background-color: #13aff0;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0;
    padding: 14px 20px; <== 14px is causing your issue in your site.
    border: 0;
    cursor: pointer;
    text-align: center;
    letter-spacing: 0.1em;
    line-height: 1;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
```
I hope the above helps you.

Kind regards
Thread Starter wordmax
(@wordmax)

3 years, 6 months ago
Hi. Thanks for your reply and help. We added css in the custom css (customizer) but it does not have any affect and won’t over-ride the theme. In the customzier when adding the CSS it actually does make a difference to the button appearance, but it does not change the button appearance on the front-end after ‘publishing’ the changes after custom CSS is added.

Example CSS:
```
button[type="submit"] {
	padding:8px 15px;
}
```
Any ideas how to make it work? Maybe this is an issue for OceanWP devs to address?

Thanks
Plugin Support mbrsolution
(@mbrsolution)

3 years, 6 months ago
Hi, try the following custom CSS code.

I am not sure which CSS code below would be for the button in your theme, so add all the classes as per the example I shared above.
```
input[type="button"], input[type="reset"], input[type="submit"], button[type="submit"], .button, body div.wpforms-container-full .wpforms-form input[type=submit], body div.wpforms-container-full .wpforms-form button[type=submit], body div.wpforms-container-full .wpforms-form .wpforms-page-button {
	padding:8px 15px;
}
```
Let me know how you go.

Thank you
- This reply was modified 3 years, 6 months ago by mbrsolution.
Thread Starter wordmax
(@wordmax)

3 years, 6 months ago

Thank you my friend. That worked perfectly. I appreciate you taking the time to help out. I will probably buy premium/add-on feature in the future so I can add some more custom fields to the form.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Payment button text – vertical align issue OceanWP theme’ is closed to new replies.

Tags