How do I show the card logos in a separate line?

  • Resolved neo4evr

    (@neo4evr)


    3 years, 5 months ago

    Hello,
    If you check my checkout page on a mobile device, the whole line of Credit / Debit Card is going below the checkbox’s circle because all the CC logos are in the same line with the text.
    How can I push the logos to the next line so that the form appears neat and properly styled? I want to Credit Card / Debit Card text to appear right beside the checkbox circle and not below it.

    Thanks!

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Payment Plugins

    (@mrclayton)

    @neo4evr 

    @media screen and (max-width: 520px){
    #payment ul.payment_methods li[class*=payment_method_stripe_cc] label {
        display: inline-block;
        width: 80%;
    }
    #payment ul.payment_methods li[class*=payment_method_stripe_cc] label span{
        width: 100%;
    }
}
    Thread Starter neo4evr

    (@neo4evr)

    Thank you so much! This fixed the layout issue ??
    Note: I have used max-width as 1020px because there were still certain widths where the layout issue was still occurring. Now it is there no more.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How do I show the card logos in a separate line?’ is closed to new replies.