Issues mobile view

[Luinenburg]

Hi team,

First of all, thanks for X! Really like the theme.

I’m currently finalizing a new website for a client, but I have a couple of questions:

1. When viewing the site on mobile (and in desktop Safari as well) some things look different. The lines visible on the site should be dotted, but on mobile and in Safari I see squares. On mobile I also see different heading fonts.
2. On mobile scrolling isn’t smooth. It gets stuck quite often and I have no idea why that is.
3. How can I change the colors of the social icons in the top bar?

Hoping to hear from you! Please let me know when it’s needed to share URL or login credentials.

[prakash_s]

Hello @Luinenburg,

Thanks for writing to us.

For the question number 1 and 2, It is not possible to advise you without checking your site. I would request you to please share your exact page URL or it would be best if you could share the exact page URL with a marking screenshot.

For question number 3

Regretfully there is no option to change the top bar social icon colour. It would require cust CSS customization. You can use this custom CSS code under X—>Theme option—>CSS.
Please feel free to change the Color code as per your design.

.x-topbar .x-social-global a {
    color: #ff0808;
}

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.
Thanks

[Luinenburg]

Thanks for your quick reply @prakash_s !

For questions 1 & 2, this is the URL: https://miedema-bedrijfstraining.nl/ (scrolling and deviant fonts unfortunately apply to all pages).

This is one of the examples coming from the home page. The first image is how I created it and how I want to see it on all platforms and devices (below is in Google Chrome, MacBook):

This is what I get on Safari, MacBook (line has squares instead of dots):

On mobile (all browsers) I get this. The wrong font and the square line in stead of a dotted line:

The same issue applies to the company name that is displayed top left. Another font is used when I view the site on mobile.

Hope you can help me to solve this!

[christian]

Hey @Luinenburg,

The border issue is a Safari bug and the font issue is most probably only happening on your device as I’ve tested both on Safari and Android and I see the bold font. Please try clearing your browser cache for this and if that doesn’t fix the issue, please give us the operating system and browser name and version number

For the border issue, this requires a bit more work but you can use a series of Icon elements. This is the cross-browser solution.

Hope that helps.

[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