Moving the Log In button on a paywall page

Site URL: https://www.resetnutrition.co/membership-home

Hi there,

I have a client site using the membership platform, and I wondered if anyone knew of a way to move the login button on the paywall page, up to under the product description at the top. 

I can't quite figure out how to target it on this page, being a system page.

Its not to bad on desktop, but most of the users of the site are on mobile and the login button is hidden on most mobile devices. For better user experience, it'd be ideal to have it higher and visible upon launch of this page.

Screenshot attached of the mobile site appearance and arrow indicating where the button would ideally sit.

Many thanks in advance to anyone who has any ideas or a solution!

Hi @MeaganH, You can add this code under Website > Pages > Website Tools > Custom CSS to move the membership login button right below the description text.

@media screen and (max-width: 767px) {
    [data-test="paywall-page-root"] {
        display: flex;
        flex-direction: column;
    }

    [data-test="paywall-page-root"] #headline {
        order: 1;
    }

    [data-test="paywall-page-root"] #description {
        order: 2;
    }

    [data-test="paywall-page-root"] .sqs-editable-button.sqs-button-element--primary.sign-in-button {
        order: 3;
        width: fit-content;
        margin: 0 auto;
    }

    [data-test="paywall-page-root"] .product-blocks-container {
        order: 4;
    }
}