Please try increasing the “Button Width” from the following settings interface:
PayPal Settings > Button Appearance
In this API integration, PayPal displays the card form within the same button widget. Try setting the button width to around 300px and see if that improves the appearance.
So this needs a detailed reply.
I tried deactivating all plugins, themes and CSS. Tried changing to a new theme. Tried a different browser. I even tried deleting browser data but then this issue is seen in all browsers. Nothing worked!
I then tried a new WordPress install with standard button size as set from default install. This did work with full size PayPal form and buttons being viewed.
So changing the button size with current (site with issue) WordPress install works, I tried up to 650px and all was well. This then fills the modal popup (approx). Mobile version seems fine with adjusted button size.
So what is causing the buttons and form to be squashed to left with install settings, it just seems to be this install?
Can you please share a link to the page where the payment button is? That will let me inspect the button using my browser. The screenshot doesn’t let me check if all the PayPal library has loaded or not on the webpage.
Hmm odd just seems to be my laptop, I tried my desktop.
However, the modal on my test site that worked fine without any button width adjustments has just gone back to the squashed left side. At least there is an option.
I will share my site address via email.
-
This reply was modified 1 year, 2 months ago by
hunnsdon.
Quick note: the issue you’re describing might be related to caching. I recommend checking out the following documentation, as it could be helpful in your situation:
https://wp-express-checkout.com/impact-of-caching-on-e-commerce-sites/
What a coincidence I had changed this before I got your message. All caching is off on both test and live site.
This just leaves the issue of modal contents size.
Conclusion:
After private discussions with developer my issue with width and X box to close modal were sorted out.
UPDATE: Previously mostly private email conversation with developer.
I have had a tinker with CSS. I’m just a novice with CSS but see below.
Possible solution for permanent fix for everyone.
.wpec-modal-content, .wpec-modal-container
Expand the PayPal Button Appearance Settings to include both CSS for content and container. I know you don’t see this issue on your system, but would this addition be an issue for everyone else or could it be included?
So for me I set as follows, it scales down for mobile and looks great in both Tablet and Desktop.
.wpec-modal-content, .wpec-modal-container {
max-width: 420px;
}
-
This reply was modified 1 year, 2 months ago by hunnsdon.
-
This reply was modified 1 year, 2 months ago by hunnsdon.
@hunnsdon This isn’t a change we can apply to the core plugin, as it would impact all users’ installations.
The current layout and CSS have been tested extensively under various scenarios. It’s important not to alter them unless we can reproduce the issue on a clean WordPress setup with a default theme and only our plugin active. This helps ensure the issue isn’t being caused by theme-specific or site-specific factors.
Any changes we make need to consider a wide range of environments and use cases. Otherwise, we risk breaking the layout for other users and introducing new issues.
If you can provide steps to reproduce the issue on a default WordPress installation with just our plugin enabled, we’d be happy to investigate further.
The only thing you could investigate is the perhaps the same effect my screen size has on the setting page issue I posted previously.
https://ww.wp.xz.cn/support/topic/error-with-back-end-display/
My screen size is 1351 × 647
-
This reply was modified 1 year, 2 months ago by hunnsdon.
