Take a look at this interactive coding playground showcasing the following React code:
import React from "react";
import ReactDOM from "react-dom";
import {
PayPalScriptProvider,
PayPalButtons,
usePayPalScriptReducer
} from "@paypal/react-paypal-js";
import "./styles.css";
function App() {
return (
<div className="hv-center-container">
<div>
<div className="thank-you h-center-container">
<div>Adjust the viewport width and observe</div>
</div>
<div className="h-center-container">
<PayPalScriptProvider>
<div className="paypal">
<PayPalButtons
style={{
layout: "vertical",
shape: "pill",
tagline: false,
height: 55
}}
/>
</div>
</PayPalScriptProvider>
</div>
</div>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Along with the specified styles:
.hv-center-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
width: 100%;
}
.h-center-container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.thank-you {
font-size: 3em;
margin-bottom: 1em;
}
.paypal {
width: 100%;
}
If the width property in the .paypal style rule is specified in pixels, the alignment of the PayPal buttons would be correct. However, when set in percentage, an issue arises.
Why does this occur and what are the possible solutions?