Log in pop up sizing?

[tmh23]

Can the size of the login pop up modal be changed so that on mobile it is not cut off?  Currently when you click login the pop up comes up and the screen zooms and the part of the modal is cut off.

 

[Kieran_SQ]

Hi @tmh23,

Thanks for reaching out, I have looked at your site via Google Chrome device emulator and via my phone and I cannot see the issue you’ve described. Please could you attach some screenshots from your device so I can look into this further for you.

Thanks,

Kieran.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[tmh23]

Here ois a photo of what happens.

Attachments:

You must be logged in to view attached files.

[Kieran_SQ]

Hi,

Please try adding the following to your KLEO Child theme’s style.css or to Theme Options > General Settings > Scroll to: Quick CSS.

#kleo-login-modal {width: 95% !important;}

Thanks,

Kieran.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[tmh23]

Here is something I noticed…
The site zooms with the launch of the pop up. If you slide over, close the pop up you still see the site zoomed. If you pinch zoom the site back down to normal and then click login again the pop up is placed perfectly with not zooming or cutoff.

I wonder if it’s that the font size of the username and password fields is set to something smaller than 16px. If it is then that might be causing the zoom.

I set the body font size for the site to be 16px and that fixed the zooming for all the other input fields on the site and made it nicer for the user.

[tmh23]

Added the code and it sort of fixed it. It zooms still but centered. See photos. Second photo is if you close the pop up.

Attachments:

You must be logged in to view attached files.

[Kieran_SQ]

Hi,

Can you try switching it to 85% please and let me know what happens.

#kleo-login-modal {width: 85% !important;}

Thanks,

Kieran.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[tmh23]

Putting it at 85 doesn’t change it. Same as 95.

[tmh23]

Tried 75 just to see and it makes it really small and not formatted correctly. Still zooms the page.

Is there a way to make the font size 16px for the input fields as default font size?

[Kieran_SQ]

Please try the below CSS, it looks like the font size is already 16px but I put an !important in there to force it, just in case.

#kleo-login-modal {margin-left: 0px;margin-right: 0px;width: 100%;height: auto;font-size: 16px !important;}

Kieran.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[tmh23]

That doesn’t work. Makes it cut off on both sides.

[Kieran_SQ]

The margin?

You could try the below which does a calculation of 2 x the 15px you used

COPY CODE

media screen and (max-width: 480px) {
#kleo-login-modal {margin-left: 15px;margin-right: 15px;width: calc(100% - 30px);height: auto;font-size: 16px !important;}
}

Sorry for the back and forth but I am working blind as I do not get the issue on my end

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[tmh23]

No problem don’t mind the back and forth.
Tried above code and does not work.
Seems it wants to zoom the page with the pop up of the modal. I tried it on two other phones and the same issue. You don’t have the issue on your phone? Or are you just using a simulator on a browser?

[Kieran_SQ]

Hi,

I have used both Google Chrome device emulator (F12), a Samsung Note 5 and a ZTE Pro all do not show the issue. Will take a deeper look into this and get back to you.

Kieran.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[tmh23]

Very much appreciate it! I have to step away from the computer for a while so I’ll check back later today or tomorrow. Thank you for helping out.

Troy

[Kieran_SQ]

Hi,

Could you provide me with admin login credentials to I can work directly with your child theme style.css

Thanks,

Kieran.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[tmh23]

This reply has been set as private.

[tmh23]

Are you currently working on this?? I see a bunch of custom CSS is not right on my site now??
It also now zooms the page when you go to type in the input field which I do not want to happen. Makes it very un-user friendly.

[Kieran_SQ]

Hi, try to update to the latest theme version and see how it goes since we included a fix in the latest updates.

Let me know

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[tmh23]

I am not showing that there is a theme update in my dashboard. Does automatic theme update work with a multisite installation?

[Kieran_SQ]

Hi,

It should work, but it doesn’t appear to show any details, please check your ThemeForest username and API key are correct.

You didn’t have K Elements installed, which is a required plugin, I have installed this for you. Please delete your website cache and browser cache and see if this clears the issue for you. Please note that mobile devices have very aggressive caching and you will likely need to clear the browser data (minus form/password data) completely to see any changes.

Kieran.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[tmh23]

I just saw the auto update in the dashboard now. Weird it wasn’t working before. I will check things out.

Thanks,
Troy

[Author]

Posts