Breaking CSS on product pages?

  • Resolved thelyall

    (@thelyall)


    4 years, 6 months ago

    Hello,

    I’ve got a strange issue and it’s the same using both folder or subdomain URL structures (tested with both).

    If I translate one of my product pages some of the CSS displays incorrectly, but only with any foreign language selected. Most notably:

    – the percentage discount (red arrow)
    – the quantity input field
    – the cart image/price

    But this is only a problem on mobile. If I make the screen small on a desktop it appears fine, but when I test on mobile I have the issues.

    How can I find out what is causing the problem on mobile? Is it possible to fix this by excluding something in my gtranslate account, or is it something on the site?

    Thanks

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter thelyall

    (@thelyall)

    I am actually able to recreate this on desktop, and I’ve also noticed that unless full links are used the links break (i.e. relative links like /checkout become /izrakst instead of /lv/izrakst)

    I think this is an issue with the .htaccess rules not being applied properly? That might explain CSS or JS files being incorrectly referenced causing problems(?)

    Thread Starter thelyall

    (@thelyall)

    Disabling W3 Total Cache plugin fixed the issue with CSS/JS and page links – it was adding it’s own re-write rules which stopped GTranslate from working.

    Thread Starter thelyall

    (@thelyall)

    After a LOT of experimentation I haven’t been able to find a caching plugin that doesn’t interfere with the rewrite rules (i.e. they all stop the language part of the URL being added to links)

    Do you have any recommendations for a caching plugin that doesn’t interfere?

    Thanks

    Plugin Author edo888

    (@edo888)

    Hi,

    Usually caching plugins have options for “optimization” and “combination” of js and css files, which changes the file names and when you clear the cache, the files are being removed and new name is assigned to each file. Since we keep a cache on our side, it is possible that we still link to your old files, which creates issues when you clear your internal cache.

    To solve the issue, make sure that you disable this options, so that your css and js file names are not changed.

    Also, you need to make sure that GTranslate rules are on top of your .htaccess file. You may configure your .htaccess file and make it read only, so that caching plugins do not change it.

    If you need help with it, please feel free to contact our live chat:
    https://gtranslate.io/#contact

    Thanks! ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Breaking CSS on product pages?’ is closed to new replies.

Tags