How to center infotext vertically?

  • Resolved cutu234

    (@cutu234)


    1 year, 11 months ago

    The message box on the the checkout page looks quite bad. I can’t change the button or (more important) the pretty useless text below the button, since it comes from Amazon. While the standard Woocommerce text is vertically centered, the AmazonPay infotext is not vertically aligned with the button. This simply doesn’t look good. Any idea how to fix it?

    A little bit more care for the details would be very much appreciated. The checkout page is THE most important page in an online shop. It should be as clean and perfect as possible.

    Thank you!

    • This topic was modified 1 year, 11 months ago by cutu234.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support Christian

    (@christian1983)

    Hey @cutu234

    Hope you are doing well! And thanks for you patience.

    We could make some amends to center align our message “Have an Amazon account?” with the whole button being rendered from Amazon. I opened an issue. The Fix will be released in one of the upcoming versions.

    In the meanwhile here is the CSS you can test it on your site. The suggested way of adding it is through Customizer > Addition al CSS and first testing out on a staging site is preferred.

    body.woocommerce-checkout .wc-amazon-payments-advanced-info:before {
	top: 1.6em;
}

body.woocommerce-checkout .wc-amazon-payments-advanced-info #pay_with_amazon {
	order: 3;
	float: none;
	margin: 0;
}

body.woocommerce-checkout .wc-amazon-payments-advanced-info {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
}

@media screen and (max-width:532px) {
	body.woocommerce-checkout .wc-amazon-payments-advanced-info {
		flex-flow: column nowrap;
		align-items: center;
	}

	body.woocommerce-checkout .wc-amazon-payments-advanced-info #pay_with_amazon {
		margin-top: .5em;
	}

	body.woocommerce-checkout .wc-amazon-payments-advanced-info:before {
		top: 1.05em;
		left: calc(50% - 100px);
	}
}

    Let me know if that helps.

    Best,
    Christian

    Plugin Support Christian

    (@christian1983)

    Hey there,

    Since we haven’t heard back from the OP in a while, I’m going to mark this as resolved – if you have any further questions, you can start a new thread.

    Best,
    Christian

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to center infotext vertically?’ is closed to new replies.