When I tap the front-end of Amelia on iPhone it zooms in. As result, there is horizontal scrolling, which then makes the whole experience feels like the whole website is wobbling. Is it possible to switch the zoom effect off?
This is default behavior of iPhones for all forms with font larger than 16px.
I don't know if zoom can be disabled on an iPhone, but you can try changing the font's size in your theme's settings. Set it to 16px, and see if that helps.
I am using Elementor with the Hallo theme. There is no one setting for the font size per se. In Elementor I can set up the default font but this doesn't affect Amelia. The font in Amelia seems to have no connection to the theme of the website.
I am not sure about how default this behaivor on iPhone is. This is the only case where I can see this zoom. I have plenty of cases with different forms, and forms by Elementor included and they don't zoom in on iPhone.
I can see this zoom as something helpful but only if it doesn't add horizontal scrolling to the page.
I went through a search in the archives of the tickets here and found how to increase fonts in Amelia with extra CSS. I tried to do this but in some cases, like with time slots in Calendar, it broke the layout of Amelia. So, I would rather prefer to keep the font as it is and to get rid of this zoom effect or at least horizontal scrolling. In Elementor this scrolling problem is solved by setting Overflow to Hidden for a section or a column. But in the case of Amelia Elementor cannot affect the layout of Amelia, so the Overflow setting doesn't work here.
Unfortunately, there's no specific fix for this issue, and until our developers release the new Customize feature, which will most likely include the font size, please take a look at these resources:
There are a lot more results if you search for "zooming on forms iPhone" on Google, so it's quite a frequent issue - I'm surprised you never encountered it before.
Please let me know if you're able to resolve it, and in the meantime I'll reach out to our developers, and see if they can do something about it.
Thanks for the replies and links. This is quite interesting.
I've just gone to other websites I built with Elementor using its own form builder and there is no zoom, even though there are pieces of text that using 14px font. I don't know how they are doing but calendars, dropdown menus and input fields are all accessible without this zoom effect.
I will try to investigate it myself, but can you suggest to me a quick way to change the font for all the inputs that I can change in additional CSS settings in Elementor for Amelia? Are the time slots in the calendar count as input fields? Because their layout is quite fragile and I am afraid it could be easily broken if I increase the font.
Firstly, I would like to apologize for the late response.
The thing about this is that this doesn't happen on all sites, and we can't figure out under which conditions it does occur in order to test it. The advice I shared with you is all vague info I received as feedback from our other customers that resolved this issue. Most likely - this is coming from the theme.
Can you try adding this CSS to the page where Amelia is?
Custom code needs to be applied to the page where the booking form is. Depending on what you're using (Gutenberg blocks, or some page builder), adding the CSS or JS can be done in a few different ways.
If you need help with adding custom CSS to the page, please take a look at this article.
When I tap the front-end of Amelia on iPhone it zooms in. As result, there is horizontal scrolling, which then makes the whole experience feels like the whole website is wobbling. Is it possible to switch the zoom effect off?
Hello there.
This is default behavior of iPhones for all forms with font larger than 16px.
I don't know if zoom can be disabled on an iPhone, but you can try changing the font's size in your theme's settings. Set it to 16px, and see if that helps.
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
Thanks for the reply.
I am using Elementor with the Hallo theme. There is no one setting for the font size per se. In Elementor I can set up the default font but this doesn't affect Amelia. The font in Amelia seems to have no connection to the theme of the website.
I am not sure about how default this behaivor on iPhone is. This is the only case where I can see this zoom. I have plenty of cases with different forms, and forms by Elementor included and they don't zoom in on iPhone.
I can see this zoom as something helpful but only if it doesn't add horizontal scrolling to the page.
I went through a search in the archives of the tickets here and found how to increase fonts in Amelia with extra CSS. I tried to do this but in some cases, like with time slots in Calendar, it broke the layout of Amelia. So, I would rather prefer to keep the font as it is and to get rid of this zoom effect or at least horizontal scrolling. In Elementor this scrolling problem is solved by setting Overflow to Hidden for a section or a column. But in the case of Amelia Elementor cannot affect the layout of Amelia, so the Overflow setting doesn't work here.
Hi again DoctorZoidberg
Unfortunately, there's no specific fix for this issue, and until our developers release the new Customize feature, which will most likely include the font size, please take a look at these resources:
https://www.warrenchandler.com/2019/04/02/stop-iphones-from-zooming-in-on-form-fields/
https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone
https://stackoverflow.com/questions/11064237/prevent-iphone-from-zooming-form
https://stackoverflow.com/questions/46962575/ios-prevent-zoom-on-text-input
There are a lot more results if you search for "zooming on forms iPhone" on Google, so it's quite a frequent issue - I'm surprised you never encountered it before.
Please let me know if you're able to resolve it, and in the meantime I'll reach out to our developers, and see if they can do something about it.
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
Thanks for the replies and links. This is quite interesting.
I've just gone to other websites I built with Elementor using its own form builder and there is no zoom, even though there are pieces of text that using 14px font. I don't know how they are doing but calendars, dropdown menus and input fields are all accessible without this zoom effect.
I will try to investigate it myself, but can you suggest to me a quick way to change the font for all the inputs that I can change in additional CSS settings in Elementor for Amelia? Are the time slots in the calendar count as input fields? Because their layout is quite fragile and I am afraid it could be easily broken if I increase the font.
Hello again.
Firstly, I would like to apologize for the late response.
The thing about this is that this doesn't happen on all sites, and we can't figure out under which conditions it does occur in order to test it. The advice I shared with you is all vague info I received as feedback from our other customers that resolved this issue. Most likely - this is coming from the theme.
Can you try adding this CSS to the page where Amelia is?
Custom code needs to be applied to the page where the booking form is. Depending on what you're using (Gutenberg blocks, or some page builder), adding the CSS or JS can be done in a few different ways.
If you need help with adding custom CSS to the page, please take a look at this article.
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables