zerosodium

[flint vigil]

Hi there

Haven't heard of this commonly though Payment Element wasn't necessarily optimized for mobile web but it should work.

Can you give me more specifics?

Including screenshots?

[obsidian onyx]

this is a code snippet in react

return (
    <div className="absolute h-screen w-screen bg-black flex justify-center items-center">
      <form onSubmit={handleSubmit} className="px-5">
        <AddressElement
          options={{
            mode: "billing",
          }}
        />
        <PaymentElement options={paymentElementOptions} />
        <button
          className="mt-5 bg-[#FF0000] py-2 px-4 rounded-[6px]"
          disabled={!stripe || !elements}
          id="submit"
        >
          {isOffer ? "Save and review bid" : "Pay now"}
        </button>
      </form>
    </div>
  );

[flint vigil]

Okay yeah that doesn't really help at all. How are you styling Payment Element? What is happening when you say "having some issues"?

[obsidian onyx]

here's a screen recording of the inspector. the further down it seems like the odder it gets.

and I am only the styling the element with the appearence value like so

  const appearance = {
    theme: "night",
  };

[vagrant garden]

Hi there 👋 jumping in as my teammate needs to step away soon. Can you help us understand what you're referring to when you say things get "odder"?

[obsidian onyx]

to be more specific, when I go to click on a payment input at the bottom it jumps to a different form element

as seen in the video

[vagrant garden]

When using what device or browser? Is it consistent across multiple devices, OSs, and browsers?

[obsidian onyx]

yea so on normal desktops it works, but when I go into devtools and change the size to mobile and try to click on the form, the click doesn't seem to be working due to the issue mentioned above. could this be an issue only in devtools?

[vagrant garden]

Possibly, do you see the same behavior on a physical device?