Problem with layout and fonts

Hi Team,

The website shows a different layout (badly formatted text, ugly font) on certain web browser (safari for this instance) but shows correctly on chrome. Not able to find the reason behind this problem. Also, the marquee text (loop) on certain browser is jittery.

The same been experienced on mobile browsers as well.

Attaching short video for you. Please help.

Attachments:

You must be logged in to view attached files.

Apart from this, I am also having issues on woodmart features such as Linked Variation (not able to select more products), Dynamic discounts (not able to add conditions).

Attachments:

You must be logged in to view attached files.

Why is this ticket still not reviewed?

@hungpd-name – Can you help or at least assign this to a team member?

Hello,

I apologize for the delay.

May I disable 3rd party plugins and etc. for testing?

Looking forward to hearing back from you!

Kind Regards

Certainly Luke. This is a staging site, please proceed with any action you deem fit.

If you find the problem and implement on staging site, do let me know here so that I could replicate it on live site as well.

Hello,

1. After disabling third-party plugins, the layout started to look good and linked variations and dynamic discounts started working correctly.

https://take.ms/AjsUr

And set the Vertical alignment here https://take.ms/IA6Sj as a default.

Dynamic discounts: https://take.ms/cAJz8
Linked variations: https://take.ms/EyDos

2. As for the marquee, you use the tag to show it https://take.ms/0QpVm , the thing is that the tag is deprecated from web standards and may not work properly in modern browsers, so its use is not recommended. It is impossible to fix it or somehow affect its work through the WordPress theme, since support has been discontinued at the browser level.

I suggest you use our “marquee” element instead – https://take.ms/j01xc, define it via HTML Block and then assign to the header banner.

Kind Regards

Thanks Luke.

1. The vertical alignemt is set to “default” on the live site but the text still a reflect the same way. Note that this happens only on certain browswer, chrome/edge shows this info correctly.

Regarding dynamic discount and linked variation – Any idea which plugin was affecting this (so that it would be easy for me to replicate it)?

Thank you for the suggestion on marquee element. I will try that now.

I have 1 more problem with youtube video on product description. For some reasons, the youtube player placeholder is not getting resized (it’s hosted through media library >> embedded video option). This product’s URL is: https://plugintest.durvient.com/auto-dimming-irvm-internal-rear-view-mirror/ (staging site so please proceed with changes you desire).

Hello,

1. Use the below custom to make it look better on Safari, define the code for the “Custom CSS for desktop” area in Theme Settings -> Custom CSS –

.browser-Safari .hide-larger-price .wd-price-unit {
    display: inline-block !important;
}

:is(.browser-Safari,.platform-iOS[class*="FBAN"]) .hide-larger-price .price>:is(ins,small) {
    margin-inline-start: 0 !important;
}

.browser-Safari .hide-larger-price .price {
    white-space: wrap !important;
}

In other browsers, it works well.

2. Looks like the “WPCode Lite” affected the Dynamic and linked variation.

https://take.ms/ulZLP

3. The sizes of the video in the current case are related to the iframe – https://take.ms/rdNBo which could be the default values from [embed]. So try to set the width here – https://take.ms/Uiizl and check how it works.

Kind Regards

1. Updated the custom css, it didn’t fix the issue, just removed the larger price which is required. The text wrapping on Safari is still the same (tried on live as well as staging website, same result). Note that it was pasted in global instead of desktop as the problem is also on mobile browser (screenshot attached from staging site).

2. WP code is a necessary plugin, it cannot be deactivated, what is causing WP Code to break these features? Can a patch or fix be provided without deactivating WP code?

3. Updated the width as recommended however not happy that this needs to be done repeatedly on each product. Is there any other solution to replicate this on all the products where video is embedded?

Attachments:

You must be logged in to view attached files.

[Luke Nielsen]

Hello,

1. For now, it works well for mobile and tablets: https://take.ms/jYbb3 so there is no need to enable the code globally.

The provided code didn’t work due to the mistake that you made, you cannot comment the code in CSS just by adding a double slash //. The correct comment – https://take.ms/LN4H2

On the dev site, I have added it to the Desktop area and the result is on Safari – https://take.ms/pAYve as you can see it works well.

2. That plugin just adds the ability to define your custom codes, therefore the issue is related to them.

https://take.ms/MtImQ

In general, looks like this one causes the issue – https://take.ms/zw8dm, that custom affects our functionality.

3. In this case, I suggest you create the description via page builder – https://take.ms/zVN8E so in such a way you can control the styles better. E.g. for the video use the “Video” element.

Kind Regards

• This reply was modified 4 months, 3 weeks ago by Luke Nielsen.
• This reply was modified 4 months, 3 weeks ago by Luke Nielsen.

1. Luke, sorry for troubling again but looks like the code isn’t solving problem at our end (tried in different browsers as well as tried with cache cleared.

2. The particular code you highlighted has been revised if it was causing the issue, sadly, even after that, the functionality isn’t working. I am not a developer hence my knowledge is limited on what is causing the issue through the code but when I disable the code, the linked variation and dynamic pricing start to work. If you have any suggestion, please share else, I might have to live rest of the life like this 🙂

Thank you for the suggestion, I will utilize this in future product listings where video would be present.

Hello,

1. It could be the browser cache, did you clear it?

https://take.ms/XNrTtm

2. If that code affects just the “Selection” (https://take.ms/QKmgG) functionality in Products -> Linked variation, so you can disable that code for a while then adjust the dynamic or linked variation and then enable the custom code back.

Thank you for your time.

Kind Regards

Hi Luke, opened the link on incognto, the problem appeared fixed about the text wrapping however, I have noticed another problem for which I need help.

I have noticed that many times page opens but the header menus are blank, only the appear after refreshing the page. This happens quite often and I managed to capture screen recording this time.

Can you check what might be causing it and how can I fix it?

Hello,

Could you please disable the 2FA for a while? https://take.ms/UP4YZ

Thank you in advance.

Kind Regards

Sorry Luke, the 2FA grace period been extended. Please feel free to access.

Hello,

Disable this https://take.ms/mSGeM option in Theme Settings, clear the site/server cache and recheck the issue.

Thank you for your time.

Kind Regards

Hi Luke, followed your instruction, disabled mobile DOM, cleared cache on server and browser, the issue is intact (could not take screenshot)

Besides, the issue I initially reported of “bad” styling still persist. Website does not load required style and site looks aweful for a new visible.

Hello,

Please clarify how to replicate that issue – https://take.ms/mLTeQ

Thank you in advance.

Kind Regards

I am not sure but it happens often, finally managed to record screen. The new window was opened in incognito after flushing cache (after disabling doms option you suggested).

Managed to do this again (chrome, incognito):
https://gyazo.com/5907a401e774529f0ee7cfdb693a9a12

Hello,

But on the video the page was not fully loaded so there is no images – https://take.ms/kXLw1

Do you mean I should open it via Ingognito a lot of times and that issue then appears?

Kind Regards

[marcopolo]

Yes Luke. Since I am on high speed internet, this issue mostly occurs with images fully loaded, i.e. images load but styling does not.

This happens frequently but not predictable.

By the way, I am replicating this error on the live site, not staging. Didn’t try on staging.

Staging site is 4-5 days old now, due for sync up with the live site tonight.

• This reply was modified 4 months, 3 weeks ago by marcopolo. Reason: Added extra info

Hello,

Sorry for the delay.

It looks like on the staging site it works well. Please disable all plugins except these ones on the live site:

Elementor or WPBackary
Woodmart Core
WooCommerce
Enable the Parent theme

Then activate the plugins one by one, checking the issue to detect which one causes the problem.

Let me know the result.

Kind Regards

Hi Luke, sorry I could not respond yesterday. Regarding working fine on staging site – The staging site wasn’t updated and was out of sync with the live site. It has been updated last night.

This is the current situation on safari (incognito). Most of the issues are happening on safari only and some loading issues are taking place on chrome/edge as well.

https://i.gyazo.com/85a04335b68510fc6dd7db1026a13586.gif

Wait for my 2nd response after deactivate and activate plugins again.

Hello,

Okay, understood. It looks like the staging site is not working https://take.ms/rDrXE, please update it.

Thank you in advance.

Kind Regards

Yes Luke, was having issues with staging site yesterday, it’s up and working now. Please access now.

Hello,

Sorry for the delay.

On my side I am still unable to replicate it, could you please make a video from the beginning of how you replicate this?

Thank you in advance.

Kind Regards

Hi Luke, the problem is more seen on the live site (durvient.com) than the staging site (staging.durvient.com). This is surprising as staging site is clone of live site.

I have tried to uploaded screen recording but the file size limit is 2mb, hence uploaded on google photo and link been provided in the private area.

You will be able to login to live site (https://durvient.com) as well with the same credential.

Hello,

I think this problem is related to the cache, could you please disable all plugins related to the cache, and the server cache as well and check how it works?

Please disable the 2FA on the stage site – https://take.ms/93U7C

Kind Regards

[Author]

Posts