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

Improve this question

1 Answer 1

Reset to default
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; }
Improve this answer
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. Commented 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. Commented 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. Commented 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/… Commented 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. Commented Nov 13, 2022 at 10:36

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.