Popup not centered on mobile

Hello @bruttimabravi

Hope you are doing well!

Please try reducing the modal width from settings to see if it will solve the issue.

If this will not help, it will require CSS code to change pop-up position, please try out:

@media screen and (max-width: 480px) {
.hustle-modal {
right:10px;
}
}

Add the code to Appearance > Customizer > Additional CSS. Feel free to change the value in right:10px;. Please note the CSS class may need to be changed, based on a set up on your site.

Hope this helps!

Cheers,
Nastia

Hi Nastia, thanks for your help!
Your hint works great!

Just 2 new questions

1st: how I can reduce the size of the modal panel in % and not in pixel? I prefer the set a % based on screen size instead of a specific size in pixels.

2nd: as you can see in the video [use the link] after a submission the animation looks problematic. Is this the correct effect?
On mobile it looks different.
https://drive.google.com/file/d/1t3GRMvSd8JwZHH5E104NjzUxMIoRFjcT/view?usp=sharing

Thank you again!

EA

Hello bruttimabravi,

1st: how I can reduce the size of the modal panel in % and not in pixel? I prefer the set a % based on screen size instead of a specific size in pixels.

You can do it using Custom CSS option instead of the custom size in the Design Settings:

2nd: as you can see in the video [use the link] after a submission the animation looks problematic. Is this the correct effect?

This is the correct effect. I double checked on my site and it is the same.
Since your popup is quite high then it will look like that.

kind regards,
Kasia

Great Kasia,
thank you so much.

I’m getting some difficulties trying to set the right size for desktop and for mobile too. For example if I set a width of 50% for desktop looks great but not the same on mobile.
A second problematic aspect is related to the position that now goes wrong, especially stying on the lower part of the display/browser.

How can I set different sizes for different devices?
And for every type of devices how can I force the center in height and in width too?

Regards!

EA

Hello @bruttimabravi,

You can use media queries for adding specific styles for different screen sizes
https://www.w3schools.com/css/css3_mediaqueries_ex.asp

When you do that you need to remember to use Appearance -> Customize -> Additional CSS filed (not the one directly in the Hustle).

kind regards,
Kasia

Hi Nastia,

I also havz a problem with the popup not being centered on a phone, but your CSS doesn’t work for me. Could you help please?
Here is the site: parentalitecreative.com

Thank you!
Brigitte

• This reply was modified 5 years, 2 months ago by brgl.
• This reply was modified 5 years, 2 months ago by brgl.

Hello there @brgl

Please do create a separate topic for your case and we’ll be in touch as soon as possible. ??

Thank you,
Dimitris

Thank you, in fact I tried to put the CSS into Apparence > Custom CSS inside the pluggin, it’s why my changes were not taken into account.
No problem now.