CSS in Hustle custom CSS for narrow popup

We have those styles added in WP customizer

.inc_opt_popup {max-width:400px !important; height:auto important;}

.wpoi-image {position:relative; top:-10px;}

.wpoi-form input {border:1px solid rgba(128,128,128,0.3) !important;}

they are working and making our Popup opt-in narrow. Problem is that those styles outside the Hustle opt-in customizer are applied with delay.
We tried to move those into Hustle, but this line

.inc_opt_popup {max-width:400px !important; height:auto important;}

stops working there, because Hustle is prefixing selectors there.

Can you help with CSS that will make popup narrow and will work inside Hustle?

  • Nahid Ferdous Mohit

    Hi Robin !
    Hope you are having a great day!

    Here's a little fix to your code below:

    Can you please change this code

    .inc_opt_popup {max-width:400px !important; height:auto important;}

    To

    .inc_opt_popup {max-width:400px !important; height:auto !important;}

    ? It is missing a '!'.

    Moreover, to overcome the delay issue, can you add the following CSS to your WP Customizer Custom CSS field in the same way you added the previous ones?

    .inc_opt_popup.inc_optin_1 .wpoi-hustle .wpoi-optin .wpoi-container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    
    .inc_opt_popup.inc_optin_1 .wpoi-hustle.wpoi-layout-one .wpoi-optin>.wpoi-container>.wpoi-element:nth-child(1) .wpoi-image-left .wpoi-image, .inc_opt_popup.inc_optin_1 .wpoi-hustle.wpoi-layout-one .wpoi-optin>.wpoi-container>.wpoi-element:nth-child(1) .wpoi-image-left .wpoi-image>div.wpoi-hustle.wpoi-layout-one .wpoi-optin.wpoi-small>.wpoi-container>.wpoi-element:nth-child(1) .wpoi-image-left .wpoi-image, .inc_opt_popup.inc_optin_1 .wpoi-hustle.wpoi-layout-one .wpoi-optin.wpoi-small>.wpoi-container>.wpoi-element:nth-child(1) .wpoi-image-left .wpoi-image>div {
        border-top-right-radius: inherit;
    }
    
    .inc_opt_popup.inc_optin_1 .wpoi-hustle .wpoi-optin .wpoi-container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    
    .inc_opt_popup.inc_optin_1 .wpoi-hustle .wpoi-optin .wpoi-fields-separated .wpoi-element {
        margin-right: 0;
        margin-bottom: 10px;
    }
    
    .inc_opt_popup.inc_optin_1 .wpoi-hustle .wpoi-optin .wpoi-button {
        -webkit-box-flex: 0;
        -ms-flex: 0 36px;
        flex: 0 36px;
    }

    Let me know if this works for you. Thanks!

    Best,
    Nahid.