I have 2 html elements on my checkout for which I need to change the position on the page, depending on whether it's being displayed on mobile device or desktop.

I cannot solve this using css only because it would require a lot of aboslute positioning which would be messy.

I also cannot have the elements on the page twice, one for mobile one for desktop and show/hide via breakpoint. The elements contain too much code which would be duplicate, and are also linked to a lot of js which would have to run twice.

So my approach is to have some js move the element depending on $(window).width (don't know if that's the correct width to check but that's not the problem for now)

So I added this to onepage.phtml

<script type="text/javascript">
    require(['jquery', 'checkoutjs'], function($, checkoutLoadAfter) {

And this is in Magento_Checkout\web\js\checkoutjs.js

define(['jquery'], function($){
    "use strict";
    return function checkoutLoadAfter()
        $(document).ready(function() {
            if ($(window).width() >= 786) {

Of course this does not work because all the checkout elements are added via jsLayout themselves and my script seems to run before that so there are no elements to move on the page.

How Can I change the position of my elements based on screen width?

Assuming the elements are either uiCOmponents or could be changed to be uiComponents could I have some sort of if/else screen width checking in my jsLayout or within the html templates that are calling the knockout templates? Or can my code be changed to load after the rest of the jsLayout script?


Magento by default uses order css attribute to position components, you can manipulate order attribute in media queries to accomplish this.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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