Payment Option Image Size on Cart/Checkout are Completely Disabling Blocks

  • Resolved danielbattersby

    (@danielbattersby)


    4 years, 3 months ago

    The image SVGs for the payment options in the cart and checkout blocks are absolutely massive. They are also so large that on mobile devices, there is no ability to even see the cart or checkout because they are covering the entire screen and rendering the inability to scroll, thereby the blocks won’t allow users to follow the workflow of going to cart then check out.

    https://danielbattersby.com/cart & /checkout pages for reference.

    I have yet to discover a fix and I cannot seem to figure out custom CSS to solve this either.

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Albert Juhé Lluveras

    (@aljullu)

    Hi @danielbattersby,

    That seems to be an issue with your theme, inspecting the images I can see it hard-codes their CSS height property to be auto, so images are going to take as much vertical space as they can.

    My suggestion would be to contact with the developer of your theme and explain the issue to them, so they can fix it on their end. In the meanwhile, you can also use this CSS snippet which might fix the issue for now:

    
.wc-block-components-payment-method-icons .wc-block-components-payment-method-icon {
	height: 24px !important;
}

    However, notice it’s better to contact your theme developers so they can work on a future-proof fix.

    Hope it helps!

    Thread Starter danielbattersby

    (@danielbattersby)

    Hey Albert,

    This is excellent, thank you so much for looking into this! The code is great on desktop and tablet, but for mobile, it still is taking up the full screen. Is there a way to adjust the code to be more responsive? I’ve also put in a ticket with the theme developers as well to inquire more.

    While I have you, would you be able to provide the css class for the “proceed to checkout” / process order buttons? I want to adjust the colours to match my website. I tried putting together some code myself, but I admit, I’m not the greatest with code – so sorry!

    Again, I truly appreciate your help!

    Thanks and I look forward to hearing back!

    Best regards,

    Daniel

    Mike W

    (@nixiack8)

    Hi @danielbattersby,

    Sorry for the wait on this reply – in this case since the issue appears to be theme specific, it would be best to continue following up with the theme developers to ensure they have it working for the mobile compatibility options in the theme (since it works in Desktop view).

    If you have any other questions or concerns about Blocks let us know! I will go ahead and close this thread for now. Have a super day ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Payment Option Image Size on Cart/Checkout are Completely Disabling Blocks’ is closed to new replies.