COPYandPAY optimises the experience for mobile browsers by default. If you are creating a customised style for the payment form, consider these tips.

Enable responsive design in HTML

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  ...
</html>

Start with "mobile first" CSS

Build styles for mobile devices first, then enhance them using media queries for larger viewports. Adapt media queries based on your site's content instead of mirroring fixed device dimensions.

/* Default value, applies to all devices */
.button {
  width: 100%;
}

@media (min-width: 480px) {
  /* Applies only to devices with a minimum screen width of 480px */
  .button {
    width: 50%;
  }
}

Use large input fields and buttons

Larger input fields and buttons improve usability. Apple recommends a minimum touch target size of 44x44 pixels. Most input fields and buttons exceed this size, so setting the height is often enough.

.input,
.button {
  height: 44px;
  width: 100%;
}

Test across systems and devices

Testing mobile compatibility is time-consuming due to variations in operating systems and screen sizes. Rank testing based on market share and use multiple resolutions. While testing on actual devices is ideal, desktop browser plugins like User Agent Switcher for Firefox and Chrome allow quick switching between OS experiences.