0

I have a question regarding flexboxes. I use the amasty one step checkout, beside that I want to offer payment by klarna. The problem here is, that the original payment choices are flexboxes but the checkboxes for klarna are not. This results in a silly experience. To choose one of the klarna payment options, I have to click in the area of the logo. (label klarna-payments-method-cell) The normal / original payments are clickable through the whole contianer, cause it´s a flex-element. Wondering where I have to make adjustments to make the klarna checkboxes to flex-elements. Amasty or Klarna files, custom css in the theme files?? Sorry for the inconvenience, Although I am an IT Guy, I am absolutely bad at programming, more the cloud/infrastructure/DB guy.

Klarna div

Original payment method

Klarna Cell

1 Answer 1

0

Figured it out.

Klarna Css was responsible for this.

So I´ve done the following:

Create the module folder in your theme folder:

app/design/frontend/VENDOR/YOUR_THEME/Klarna_Kp/web/css/source/

Create a _extend.less file in there with the following content:

.klarna-payments-method-cell {
    display: flex;
    align-self: center;
}
5
  • I've improve your answer to make it correct by use _extend.less instead of _module.less. If you use _module.less, your file will override the CSS from _module.less of the Klarna_Kp extension, and cause the CSS from _module.less of theKlarna_Kp extension getting lost.
    – Tu Van
    Nov 13, 2022 at 7:25
  • Please mark your answer as accepted, that indicates your issue is solved and helps others with the same issue find out the verified answer easily.
    – Tu Van
    Nov 13, 2022 at 7:26
  • I thought _module.less would be the correct option since .klarna-payments-method-cell already exists and it should be overwritten. Wouldn't the code then exist twice? I actually ask to be able to understand it. Nov 13, 2022 at 9:46
  • You can read more about _override.less and _extend.less from the Magento official document developer.adobe.com/commerce/frontend-core/guide/css/quickstart/…
    – Tu Van
    Nov 13, 2022 at 10:22
  • _modules.less in your theme will replace the content of Klarna_Kp extension's _module.less file then Klarna_Kp extension's _module.less file will be lost if you did not copy all content of that file to your _module.less file. In your case, you should use _extend.less instead of _module.less which allows you to extend the parent's CSS file but not need to override the whole file of the parent .less file which helps your code easily maintained.
    – Tu Van
    Nov 13, 2022 at 10:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.