Issues mobile view

[Luinenburg]

Hi @christian, @prakash_s,

Sorry to bother you once more, but I’m still not really clear on how I can solve these issues.

1. What exactly do you mean with the border issue? Do you mean the lines with squares in stead of the dots that I want to see? If so, could you please explain a bit more on how to solve that?
2. After clearing my browser cache several times, I still see the wrong font. Unfortunately, also the screenshot you shared contains the wrong font. It should be the ‘Domine’ font.
3. I still don’t know how to solve the scrolling issue on mobile. Every time I open the site on mobile, it gets stuck when I try to scroll down (on all pages). I tested this on other phones too and I get the same issue.

Could you please help me again? If it’s needed to share the login credentials for WP so you can take a closer look, please let me know as I’m really hoping to get this site up and running as soon as possible.

Thanks so much!

[tristup]

Hi @Luinenburg,

Please find the answer to the queries below.

1. Yes, the Square dots instead of circle dots are the border and which is a Safari browser bug. I would suggest you follow the suggestion given by my colleague in his last post.

2. I have checked it again and found the Domine font is loading for the specific text.

3. The scrolling issue comes due to the second scrollbar that appears on your website, I have investigated it and found the Global Blocks that used in the footer is the reason behind it. Please adjust the Flex value for the column to get rid of this issue.

Hope it helps.
Thanks

[Luinenburg]

Hi @tristup,

Thanks for your help. Much appreciated! Regarding the queries:

1. So you mean that I have to add multiple separate icons in stead of one line, in order to have a dotted line displayed on all browsers? How do I make sure that there is some (horizontal) space between each icon?
2. In your screenshot I can see that the ‘font-family’ is Domine indeed, but ‘font being rendered’ says Times New Roman. And I believe Times New Roman is what I get to see on some devices. Is there a way to turn ‘font being rendered’ into Domine as well? Would really want to see Domine on all browsers and devices.
3. Great that you could figure out that this issue has to to with the Global Blocks --> footer. However, I’m not really clear on how to adjust this Flex value. I’m sorry, I’m not a very experienced page builder. Could you please let me know where I can adjust this value and how to adjust it exactly?

Thanks again!

[ruenel]

Hello @Luinenburg,

1.) If the line should only be dots, then the icons are the cross-browser solution. When adding the icons, you can always set the left and right margin so that there will be some space or no space at all between the icons. Now, this solution may also lead to other complications. If you can make use of a simple thin or thick line instead of a dot, that would be an easy solution then.

2.) I see that you have inserted incorrect headline content like this:

<h5><span style="color: #ffffff;">Voor leidinggevenden</span></h5>

<h4><span style="color: #ffffff;">Voor ondernemers</span></h4>

<h4><span style="color: #ffffff;">Voor teams</span></h4>

This can affect other elements which may also why the Domine font is not rendering properly. When using the headline element, you do not need to insert the tag or color. You only need to insert the text: Voor teams for example.

Headline settings:

Headline > Setup > Base Font Size & Tag:

Headline > Text > Text Format > Text Color:

If you don’t see some of style options, you need to turn on the Advanced Mode by going to the Settings > Preferences > Advanced Mode

3.) To know more about Flexbox, please check this out:

Use Flex Layout | Themeco Docs

Hope this helps.

[Luinenburg]

Hi @ruenel,

Thank you for your help.

1. I fixed this with the solution you suggested.
2. Not solved yet. Also for some of the text elements I get to see the wrong font, so not only for the headline elements. Is there another way to solve this issue?
3. I watched the video you’ve sent, but I’m still a bit lost. As far as I know, I never worked with Flexbox, so I have no clue how I could have created this issue and not clear on how to solve it at all. If you could clarify a bit more on this issue, that would be amazing. Really hope to solve this problem soon, cause right now the site is useless on mobile.

Thanks again!

[ruenel]

Hello @Luinenburg,

To better assist you with your issue, kindly provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​
To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[Luinenburg]

Hi @ruenel,

I just shared the requested info via the secure note above. Thank you so much for helping me out!

[ruenel]

Hello @Luinenburg,

There are 20+ outdated plugins. Kindly make sure that everything is up to date. After doing the updates, kindly clear your plugin caches since you have installed the WP Fastest Cache plugin. Temporarily disable it while we are troubleshooting your issue.

By the way, I have compared the font family and I am not seeing any difference. This is what I am seeing:

• https://fonts.google.com/specimen/Domine?preview.text=Een%20grondige%20aanpak%20voor%20meer%20focus%20%26%20regie&preview.text_type=custom

And I am no longer getting a double scrollbar in smaller screens:

Please check and clear your browser cache on your phone as well before testing your site again.

[Luinenburg]

Hi @ruenel,

Thanks for your reply and the heads-up. I’ve know updated all plugins + the theme. WP Fastest Cache is now deactivated. Also cleared my cache, but I still have the same scrolling issues on mobile. It gets stuck right away.

Regarding the fonts, I still see small differences. When you look at some of the details, you can see that it differs per device - at least, this is what I still see.

On MacBook:

On iPhone:

Thanks a lot!

[tristup]

Hi @Luinenburg,

Unfortunately, the URL is not accessible anymore and showing the following error. Can you please check and get back to us once it is ready to access.

Thanks

[Luinenburg]

Hi @tristup,

I checked on several devices and browsers, but for me it’s still accessible. If you still can’t access it, do you have any idea what could cause this?

Thank you

[marc_a]

Hi @Luinenburg,

There’s is an IP restriction on your website when accessing it. I suggest that if you have any security plugin please disable it in the meantime and also ask your hosting provider if there’s some IP restriction on your website on their end.

Hope that helps.

Thank you.

[Luinenburg]

Hi @marc_a,

I think it’s fixed now. I deactivated the plugin that probably caused this. Sorry for the inconvenience.

Hope you can access it again!

[prakash_s]

Hello @Luinenburg,

Glad that you were able to fix your issue by yourself. Please feel free to reach us if you have any queries regarding our theme and theme settings.

Have a great day!
Thanks

[Luinenburg]

Hi @prakash_s,

Sorry for the confusion. I think I fixed the accessibility of the website, but not the queries you and the team were already looking into. @ruenel was checking if he could solve the issues as mentioned earlier in this topic: the fonts that look different per device/browser and the fact I still cannot scroll on the mobile site.

@marc_a was looking into it as well, but couldn’t access the site anymore. That last part should be fixed now.

Hope that makes it clearer.

Thanks again.

[prakash_s]

Hello @Luinenburg,

Sorry for the confusion I checked your site it seems that it is scrolling fine at my end in the iPhone and the font is rendering fine as well. Please have a look at the given screenshot below and the video in the secure note.

Thanks

[Luinenburg]

Hi @prakash_s,

Thanks a lot! The homepage seems to be fixed now indeed, also on my devices. However, on all other pages I still have the same issue when scrolling on mobile. Is the solution that you found for the homepage also applicable for all other pages? That would be of great help. Thanks a lot again - it’s much appreciated!

Best,
Luinenburg

[tristup]

Hi @Luinenburg,

Great that the Home Page is working fine, I would suggest you follow the same for other pages to resolve the issue.

Thanks

[Luinenburg]

Hi @tristup,

The thing is that I didn’t fix the home page myself, but that it worked after you (Ruenel, three days ago) looked at it. Could you please take a look at the other pages as well, since I have no clue how to fix it (like I wrote you ealier). I still get double scrollbars on all other pages, so it would be great if you could help out once more like discussed before. Hope to be able to scroll smoothly on all (mobile) pages soon.

Thanks a lot!

[tristup]

Hi @Luinenburg,

I have checked your pages along with the Home Page and found the double scrollbar issue still exists. I have investigated and found that the Global Blocks in the Footer is having the reason behind your issue. The image with -50px of bottom margin is the cause, I would suggest you modify it till the issue resolved.

Hope it helps.
Thanks