Title: Checkout Layout
Last modified: June 25, 2018

---

# Checkout Layout

 *  Resolved [kristoferlse](https://wordpress.org/support/users/kristoferlse/)
 * (@kristoferlse)
 * [7 years, 10 months ago](https://wordpress.org/support/topic/checkout-layout/)
 * I have a problem with the layout in Checkout.
 * The Stripe option ends up too far to the right and the text is not inline. I 
   want the stripe option inline with my other payment options at checkout. It also
   looks worse in Explorer compared to Chrome and Firefox.
 * See this picture for info [https://photos.app.goo.gl/fFC3o7x5JmnUypJXA](https://photos.app.goo.gl/fFC3o7x5JmnUypJXA)
 * How do I fix the layout?
 * Thanks!
 * /Kristofer
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fcheckout-layout%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Plugin Support [melinda a11n](https://wordpress.org/support/users/melindahelt/)
 * (@melindahelt)
 * Automattic Happiness Engineer
 * [7 years, 10 months ago](https://wordpress.org/support/topic/checkout-layout/#post-10437807)
 * Hi there!
 * Does it do that only with your custom theme? If you switch your theme to Storefront,
   temporarily, do the options line up as you’d expect them to? It could be a conflict
   with your theme.
 * You can also try to adjust the following CSS:
 *     ```
       .woocommerce-checkout #payment .payment_method_stripe label[for=payment_method_stripe] {
           padding-left: 32px;
       }
       ```
   
 * making the left padding smaller (above) as well as adjusting part of the below
   CSS may do the trick
 *     ```
       .woocommerce-checkout #payment ul.payment_methods li img.stripe-icon, #add_payment_method #payment ul.payment_methods li img.stripe-icon {
           float: right;
           max-width: 40px;
           padding-left: 3px;
           margin: 0;
       }
       ```
   
 *  Thread Starter [kristoferlse](https://wordpress.org/support/users/kristoferlse/)
 * (@kristoferlse)
 * [7 years, 10 months ago](https://wordpress.org/support/topic/checkout-layout/#post-10443655)
 * I have not tried with a different theme.
 * When I changed the CSS as suggested, text and pictures move to the left in line
   with other options. The problem with the text in Explorer (only) is still there
   as in the picture that I linked to.
 * I tested to set a max-height which seem to work.
 * .woocommerce-checkout #payment ul.payment_methods li img.stripe-icon,
    #add_payment_method#
   payment ul.payment_methods li img.stripe-icon {max-height: 30px;}
 * However I dont know yet if ruins the design in other browsers or mobile..
 *  Plugin Support [melinda a11n](https://wordpress.org/support/users/melindahelt/)
 * (@melindahelt)
 * Automattic Happiness Engineer
 * [7 years, 10 months ago](https://wordpress.org/support/topic/checkout-layout/#post-10444683)
 * [@kristoferlse](https://wordpress.org/support/users/kristoferlse/) – you may 
   need to adjust media queries if it doesn’t display as you’d like on mobile and/
   or change your theme/work with the theme developer to fix issues.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Checkout Layout’ is closed to new replies.

 * ![](https://ps.w.org/woocommerce-gateway-stripe/assets/icon-256x256.png?rev=3177277)
 * [WooCommerce Stripe Payment Gateway](https://wordpress.org/plugins/woocommerce-gateway-stripe/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/woocommerce-gateway-stripe/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/woocommerce-gateway-stripe/)
 * [Active Topics](https://wordpress.org/support/plugin/woocommerce-gateway-stripe/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/woocommerce-gateway-stripe/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/woocommerce-gateway-stripe/reviews/)

 * 3 replies
 * 2 participants
 * Last reply from: [melinda a11n](https://wordpress.org/support/users/melindahelt/)
 * Last activity: [7 years, 10 months ago](https://wordpress.org/support/topic/checkout-layout/#post-10444683)
 * Status: resolved