-
AuthorPosts
-
May 4, 2021 at 3:22 pm #1298312
After a few updates, but i`m not sure anymore if it was the theme update, php or wordpress update, i have the following problem with a clients site.
Just on mobile the following elements are not shown:
– h1
– text in buttons (but not all of them)
– text areas
– mobile menui tested it with my iphone. when i do this with the developer mode in chrome and emulate an iphone – all works fine.
Thanks for helping me!
May 4, 2021 at 3:23 pm #1298313Sorry…
Latest WP Version
Enfold Theme 4.8.2I also tried to disable all plugins – but problem still occurs.
May 6, 2021 at 6:46 am #1298714Hi,
Thank you for the inquiry.
Would you mind providing a screenshot of the issue? This is how we see the site on mobile view — h1 is completely visible.
Screenshot: https://imgur.com/7ep0RlR
Best regards,
IsmaelMay 6, 2021 at 1:33 pm #1298786Attached in private content, you`ll see the difference between
left –> mobile view (chrome/desktop)
right –> iphone (chrome/mobile)elements are not shown?
Thanks for helping me!
May 8, 2021 at 11:00 pm #1299134Hi,
Thank you for your patience and thank you for the link to your site. So I was not able to emulate this but I was able to see this with browserstack.com which uses real devices virtually, but I only have a trial account so I can only test for one minute per device, anyways, I found that the H1 text at the top of your page is wrapped with a <em> tag which seems to have a disabled display on the iPhone which could be corrected with css but I noticed that your css is a cached version from perhaps WP-Rocket and it looks like you are also using the theme compressed options and lazyloading.
So first please disable all caching, minifying, compression, lazyloading, and etc by disabling the plugins and theme optons and set the Enfold Theme Options > Performance > Delete old CSS and JS files option and clear your browser cache on your iPhone and check again, and leave it like this should we need to check.
So one of the tags that didn’t show on the iPhone was underline which on Chrome is shown by the user-agent, that is that it doesn’t specificity needed to be set for display, I believe that Safari also does the same, but perhaps the minification has broken the css so we will see once you have done the above.Best regards,
MikeJune 26, 2021 at 10:24 am #1307510Dear Mike,
thanks for reply and sry for my late reply.
I tried all the thinks you wrote, deactivating all plugins, incl. wprocket.
Deleting old css and js files, disabled lazy load, etc…But problem occurs still on apple devices.
Any further ideas?
thanks,
AndreasJune 26, 2021 at 8:36 pm #1307538Hi,
Thank you for the feedback, so originally I thought this was only occurring on the iPhone, but I tested on a desktop Mac with Safari and saw your issue in which the “h1 strong” tags & the button labels are set to display: inline where they should be set to block in order to see them. I tried to reproduce this on my test site but couldn’t, so this points to something on your site.
I also note that your “borlabs cookie” plugin is still activated and all of the text in its popup is hidden, please try disabling it.
Please include admin login in the Private Content area so I can investigate further.Best regards,
MikeJune 28, 2021 at 10:08 am #1307706Also tried to disabling the borlabs cookie again, but no change.
i pasted the login credentials in the private content.
Thanks!
AndreasJune 29, 2021 at 1:45 pm #1307936Hi,
Thank you for your patience and for the login, after much testing on a Mac with Safari, since everything shows on Windows 10 & Chrome, the h1 heading on your homepage with the structure<h1><em><strong>
I found that it would only work with both em & strong tags removed, but this didn’t account for the button labels & the text block lower on the page.
I then realize all of these elements were using your custom font GothamLight I then searched for a Free & Similar Alternative to Gotham and found Montserrat to match which is also available within the theme. Once I changed your Enfold Theme Options > General Styling > Fonts the issue was solved.
I don’t know why the Gotham font is not working on Safari but there are a lot of results for this on Google, I recommend using Montserrat instead.Best regards,
Mike -
AuthorPosts
- You must be logged in to reply to this topic.