Customize Popup Newsletter

Hi @etelshop

Could you please try this code in Appearance -> Customize -> Additional CSS:

@media all and (min-width:783px) {
.hustle-layout-content {position:relative;}
.hustle-layout-content .hustle-image {position:absolute; width:100%; text-align:center; left:0; top:20px; background:none !important;}
}

Kind Regards,
Kris

Hello @wpmudevsupport13

The code, works I just need to understand this part of the code below:

(min-width:783px)

Thank you

Hi @etelshop,

That is the part of the media query, which will apply the CSS code provided to screens that are larger than 783 pixels.

So if you want the code to apply above different breakpoint you can change that value to whatever you like.

You can also change it to max-width or use both depending on which screen size you want the code to be applied to.

For example:

@media all and (min-width:783px) {

	/*CSS added here will apply to screen size OVER 783 pixels*/

}

@media all and (max-width:783px) {

	/*CSS added here will apply to screen size UNDER 783 pixels*/

}

@media all and (min-width:500px) and (max-width:783px) {

	/*CSS added here will apply to screen size BETWEEN 500 and 783 pixels*/

}

Hope this explains things ??

Cheers,
Predrag

Hello @etelshop ,

We haven’t heard from you for some time now, so it looks like everything is sorted with Hustle ??

If not, let us know and re-open this ticket.

kind regards,
Kasia

Hello @wpmudev-support2

Thank you for your answer.

I want to change the color of the text to close the “popup” for “black color” and move the location to the top… (see attach)

https://www.americascookie.com/wp-content/uploads/2020/11/2020-11-24-3.png

Thank you

Hi @etelshop

I hope you are doing well.

Can you try this CSS for the position?

.hustle-slidein-content{
    position: relative;
}

.hustle-nsa-link{
    top: -60px;
}

.hustle-slidein-content,
.hustle-ui.hustle-slidein{
    padding-bottom: 10px !important;
    bottom: 10px !important;
}

The colour can be changed using the plugin interface at appearance > Colour > Custom:

https://monosnap.com/file/t2xGdFIblthB33vHbyEymx4R58Dmsw

Best Regards
Patrick Freitas

Hello, Support!

Thank you for your answer.

I’d like to know, how I can move the “x” to close the “popup” to the left…(see attach)

You can see this view only on mobile access.

https://americascookie.com/wp-content/uploads/2020/12/20201212_175057000_iOS.png

Thank you

Hi @etelshop

You can use this selector:

@media all and (max-width:783px) {
.hustle-button-icon{
    right: 20px !important;
}
}

You can also check the plugin options for mobile:
https://monosnap.com/file/c1qd8CbMbQU3UO309jG89dHimmnKir
https://monosnap.com/file/ziziT7OetiI8JBhLm7J0knAjEgfmsZ

https://premium.wpmudev.org/docs/wpmu-dev-plugins/hustle/#appearance-modules

Best Regards
Patrick Freitas

Hello @wpmudevsupport12

Thank you for your answer.

Where I can insert this code CSS…?

Thank you

Hi @etelshop

You can add it e.g. via “Appearance -> Customize -> Additional CSS” option in your site’s back-end. If there’s already some CSS there, add this one at the very end of existing code.

Best regards,
Adam

Hello @wpmudev-support8

Thank you for your answer.

I updated the CSS code but, the “x” bottom still the same.

https://americascookie.com/wp-content/uploads/2020/12/20201214_175322000_iOS.png

Thank you

HI @etelshop,

Could you please try replacing the above given CSS ie:

@media all and (max-width:783px) {
.hustle-button-icon{
    right: 20px !important;
}
}

With the following one and see whether it helps?

@media all and (max-width:783px) {
.hustle-button-icon{
    margin-right: 20px !important;
}
}

Regards,
Nithin

Hello @wpmudevsupport11

Thank you now it works…

If I want to move more to the left side I can just increase the “20px” to “23px”…?

Thank you

Hello @etelshop ,

If I want to move more to the left side I can just increase the “20px” to “23px”…?

Yes, you can.

kind regards,
Kasia