Ez page and awesome fonts loading issue's

I am currently in the process of updating my site to a new template, currently working on my testing subdomain to create an ez page with a bit of flare with the help of chatgpt, it looked fine until i tried to implement a change from basic up and down icons to awesome font ones and they refuse too display for me, i just removed the url from above the head tag for loading the icons as it is being used in the template and thought that may work as the template already uses them and then i fixed an issue in the templates viewport meta tag of an invalid separator and duplicated user scalable property incase that was the issue and to take it off the to do list.

i'm actually starting to grasp reading the flow of code as i go but this partcular issue is baffling me, hopefully someone is able to help, is there anything obvious that stands out in my code?

Code:

---

<style>
        /* Your existing styles */
        .clickable-section {
            margin-bottom: 20px;
            cursor: pointer;
            position: relative;
            text-align: center; /* Center text */
        }

        .section-header-image {
            width: 100%;
            height: auto;
            display: block;
            cursor: pointer;
            position: relative;
        }

        .section-header-image img {
            width: 100%;
            height: auto;
        }

        .down-arrow {
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            font-size: 20px;
        }

        .section-content {
            padding: 10px;
            display: none;
            text-align: left; /* Reset text alignment */
        }

        /* Style for the image link */
        .pc-builder-image {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 20px auto; /* Centers horizontally */
        }

        /* Style for the image text */
        .clickable-section .overlay-text h3 {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10; /* Increase the z-index value */
            color: white; /* Set text colour to white */
            text-align: center;
        }

@keyframes text-pulse {
    0% {
        text-shadow: 0 0 4px white;
    }
    50% {
        text-shadow: 0 0 8px white;
    }
    100% {
        text-shadow: 0 0 4px white;
    }
}

.clickable-section .overlay-text h3:hover {
    animation: text-pulse 1s infinite;
}

        .ez-page-content {
            text-align: center; /* Center all text content */
        }

.icon-toggle {
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            font-size: 20px;
            color: white;
            z-index: 15;
        }

.icon-plus {
    position: absolute;
    top: 50%;
    right: 10px; /* Adjust as necessary */
    transform: translateY(-50%);
    font-size: 20px; /* Adjust size as needed */
    color: white; /* Change color if needed */
    z-index: 15; /* Make sure it's above other elements */
}

.icon-minus {
    position: absolute;
    top: 50%;
    right: 10px; /* Adjust as necessary */
    transform: translateY(-50%);
    font-size: 20px; /* Adjust size as needed */
    color: red; /* Change color if needed */
    z-index: 15; /* Make sure it's above other elements */
}

    </style>

    <script>
      function toggleSection(sectionId) {
            var section = document.getElementById('section-' + sectionId);
            var iconPlus = section.previousElementSibling.querySelector('.fa-plus-square-o');
            var iconMinus = section.previousElementSibling.querySelector('.fa-minus-square-o');

            if (section.style.display === 'none') {
                section.style.display = 'block';
                iconPlus.style.display = 'none';
                iconMinus.style.display = 'inline'; // or 'block'
            } else {
                section.style.display = 'none';
                iconPlus.style.display = 'inline'; // or 'block'
                iconMinus.style.display = 'none';
            }
        }
    </script>
<head>
<body>
    <div class="ez-page-content">
        <h1>Get Your Dream PC Built!</h1>

        <!-- Customized clickable sections -->
        <div class="clickable-section">
            <div class="section-header-image" onclick="toggleSection(1)">
                <img src="/images/500x100x.png" alt="Image 1 Placeholder">
                <span class="fa fa-plus-square-o icon-toggle"></span>
                <span class="fa fa-minus-square-o icon-toggle" style="display: none;"></span>
                <div class="overlay-text">
                    <h3>Customize your PC with the perfect parts, your way</h3>
                </div>
            </div>
            <div class="section-content" id="section-1" style="display: none;">
                <p>With Crazygamer's PC Builder, you have the freedom to:</p>
                <ul>
                    <li>Choose the components that match your preferences and needs</li>
                    <li>Explore a vast selection of top-quality parts</li>
                    <li>Easily navigate through compatible selections</li>
                </ul>
            </div>
        </div>

        <!-- Placeholder for Section 2 -->
        <div class="clickable-section">
            <div class="section-header-image" onclick="toggleSection(2)">
                <img src="/images/500x100x.png" alt="Image 2 Placeholder">
                <i class="fa fa-plus-square-o icon-toggle"></i>
                <i class="fa fa-minus-square-o icon-toggle" style="display: none;"></i>
                <div class="overlay-text">
                    <h3>Select your desired software</h3>
                </div>
            </div>
            <div class="section-content" id="section-2" style="display: none;">
                <p>You can opt for:</p>
                <ul>
                    <li>Operating systems tailored to your requirements</li>
                    <li>Antivirus software for enhanced security</li>
                    <!-- Add more software options here -->
                </ul>
            </div>
        </div>

        <!-- Placeholder for Section 3 -->
        <div class="clickable-section">
            <div class="section-header-image" onclick="toggleSection(3)">
                <img src="/images/500x100x.png" alt="Image 3 Placeholder">
                <i class="fa fa-plus-square-o icon-toggle"></i>
                <i class="fa fa-minus-square-o icon-toggle" style="display: none;"></i>
                <div class="overlay-text">
                    <h3>Explore an amazing range of essential peripherals</h3>
                </div>
            </div>
            <div class="section-content" id="section-3" style="display: none;">
                <p>Enhance your setup with:</p>
                <ul>
                    <li>Gaming gear for an immersive experience</li>
                    <li>Productivity tools to boost efficiency</li>
                    <!-- Add more peripheral options here -->
                </ul>
            </div>
        </div>

        <p>To start creating your dream PC, <a href="https://www.instorepcbuilder.co.uk/crazygamer">access our PC Builder</a> below:</p>
        <!-- Image link to the PC builder -->
        <a href="https://www.instorepcbuilder.co.uk/crazygamer">
            <img class="pc-builder-image" src="/images/wtwbm_images/hm1-s1-b2.jpg" alt="Build Your PC" />
        </a>
        <p>Quotes are valid for 3 days, and if you need assistance, feel free to watch our tutorial or give us a call. We're here to help!</p>
    </div>
</body>
</html>

---

... and what template are you updating to?

wokiee its called, its on envato market https://themeforest.net/item/wokiee-...886.1701549224

Code:

---

testing.crazygamer.uk

---

Sorry, I'm unfamiliar with that template (or anything from themeforest).

If your code is as typed you have a

Code:

---

<head>

---

without a

Code:

---

</head>

---

you have a lot of code before the

Code:

---

<head>

---

Try putting

Code:

---

<head>

---

at the top and changing the

Code:

---

<head>

---

to

Code:

---

</head>

---

You also do not have a

Code:

---

<doctype>

---

or a

Code:

---

<html>

---

tag.

I corrected the code as suggested, sadly even with and without the url for font awesome included it isn't working. seems the website uses 4.7 and ive set the code to use that here but font awesome 4 is end of life, wondering if they did attempt to load but no file found so it just skipped the icons? Here's my new code on the off chance its me...

Code:

---

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!-- Font Awesome CDN link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<html>
<head>
<style>
        /* Your existing styles */
        .clickable-section {
            margin-bottom: 20px;
            cursor: pointer;
            position: relative;
            text-align: center; /* Center text */
        }

        .section-header-image {
            width: 100%;
            height: auto;
            display: block;
            cursor: pointer;
            position: relative;
        }

        .section-header-image img {
            width: 100%;
            height: auto;
        }

        .down-arrow {
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            font-size: 20px;
        }

        .section-content {
            padding: 10px;
            display: none;
            text-align: left; /* Reset text alignment */
        }

        /* Style for the image link */
        .pc-builder-image {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 20px auto; /* Centers horizontally */
        }

        /* Style for the image text */
        .clickable-section .overlay-text h3 {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10; /* Increase the z-index value */
            color: white; /* Set text colour to white */
            text-align: center;
        }

@keyframes text-pulse {
    0% {
        text-shadow: 0 0 4px white;
    }
    50% {
        text-shadow: 0 0 8px white;
    }
    100% {
        text-shadow: 0 0 4px white;
    }
}

.clickable-section .overlay-text h3:hover {
    animation: text-pulse 1s infinite;
}

        .ez-page-content {
            text-align: center; /* Center all text content */
        }

.icon-toggle {
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            font-size: 20px;
            color: white;
            z-index: 15;
        }

.icon-plus {
    position: absolute;
    top: 50%;
    right: 10px; /* Adjust as necessary */
    transform: translateY(-50%);
    font-size: 20px; /* Adjust size as needed */
    color: white; /* Change color if needed */
    z-index: 15; /* Make sure it's above other elements */
}

.icon-minus {
    position: absolute;
    top: 50%;
    right: 10px; /* Adjust as necessary */
    transform: translateY(-50%);
    font-size: 20px; /* Adjust size as needed */
    color: red; /* Change color if needed */
    z-index: 15; /* Make sure it's above other elements */
}

    </style>

    <script>
      function toggleSection(sectionId) {
            var section = document.getElementById('section-' + sectionId);
            var iconPlus = section.previousElementSibling.querySelector('.fa-plus-square-o');
            var iconMinus = section.previousElementSibling.querySelector('.fa-minus-square-o');

            if (section.style.display === 'none') {
                section.style.display = 'block';
                iconPlus.style.display = 'none';
                iconMinus.style.display = 'inline'; // or 'block'
            } else {
                section.style.display = 'none';
                iconPlus.style.display = 'inline'; // or 'block'
                iconMinus.style.display = 'none';
            }
        }
    </script>
</head>
<body>
    <div class="ez-page-content">
        <h1>Get Your Dream PC Built!</h1>

        <!-- Customized clickable sections -->
        <div class="clickable-section">
            <div class="section-header-image" onclick="toggleSection(1)">
                <img src="/images/500x100x.png" alt="Image 1 Placeholder">
                <span class="fa fa-plus-square-o icon-toggle"></span>
                <span class="fa fa-minus-square-o icon-toggle" style="display: none;"></span>
                <div class="overlay-text">
                    <h3>Customize your PC with the perfect parts, your way</h3>
                </div>
            </div>
            <div class="section-content" id="section-1" style="display: none;">
                <p>With Crazygamer's PC Builder, you have the freedom to:</p>
                <ul>
                    <li>Choose the components that match your preferences and needs</li>
                    <li>Explore a vast selection of top-quality parts</li>
                    <li>Easily navigate through compatible selections</li>
                </ul>
            </div>
        </div>

        <!-- Placeholder for Section 2 -->
        <div class="clickable-section">
            <div class="section-header-image" onclick="toggleSection(2)">
                <img src="/images/500x100x.png" alt="Image 2 Placeholder">
                <i class="fa fa-plus-square-o icon-toggle"></i>
                <i class="fa fa-minus-square-o icon-toggle" style="display: none;"></i>
                <div class="overlay-text">
                    <h3>Select your desired software</h3>
                </div>
            </div>
            <div class="section-content" id="section-2" style="display: none;">
                <p>You can opt for:</p>
                <ul>
                    <li>Operating systems tailored to your requirements</li>
                    <li>Antivirus software for enhanced security</li>
                    <!-- Add more software options here -->
                </ul>
            </div>
        </div>

        <!-- Placeholder for Section 3 -->
        <div class="clickable-section">
            <div class="section-header-image" onclick="toggleSection(3)">
                <img src="/images/500x100x.png" alt="Image 3 Placeholder">
                <i class="fa fa-plus-square-o icon-toggle"></i>
                <i class="fa fa-minus-square-o icon-toggle" style="display: none;"></i>
                <div class="overlay-text">
                    <h3>Explore an amazing range of essential peripherals</h3>
                </div>
            </div>
            <div class="section-content" id="section-3" style="display: none;">
                <p>Enhance your setup with:</p>
                <ul>
                    <li>Gaming gear for an immersive experience</li>
                    <li>Productivity tools to boost efficiency</li>
                    <!-- Add more peripheral options here -->
                </ul>
            </div>
        </div>

        <p>To start creating your dream PC, <a href="https://www.instorepcbuilder.co.uk/crazygamer">access our PC Builder</a> below:</p>
        <!-- Image link to the PC builder -->
        <a href="https://www.instorepcbuilder.co.uk/crazygamer">
            <img class="pc-builder-image" src="/images/wtwbm_images/hm1-s1-b2.jpg" alt="Build Your PC" />
        </a>
        <p>Quotes are valid for 3 days, and if you need assistance, feel free to watch our tutorial or give us a call. We're here to help!</p>
    </div>
</body>
</html>

---

Should font awesome be updated across my site whilst i have the live site running and time to perfect this?? The template was the only one showing as upto date with the latest zen so i assumed stuff would not be about to stop working potentially? It sounds like a headache to find and update all the classes across the template :/

why are these lines outside the <head></head>?

Code:

---

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!-- Font Awesome CDN link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

---

This is why chatgpt isn't a completely reliable tool, it bases it's responses off what it's found online and people often share errors online and not success :s

I just started with a description of what i wanted to achieve and then asked it to make changes to my liking, mainly copy and paste until i run into issues and i'm slowly learning as I go. I just edited it based on your feedback and i'm still not having any luck getting these icons to load up, assuming i haven't messed up the edit...

Code:

---

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<html>
</head>
<style>
        /* Your existing styles */
        .clickable-section {
            margin-bottom: 20px;
            cursor: pointer;
            position: relative;
            text-align: center; /* Center text */
        }

        .section-header-image {
            width: 100%;
            height: auto;
            display: block;
            cursor: pointer;
            position: relative;
        }

        .section-header-image img {
            width: 100%;
            height: auto;
        }

        .down-arrow {
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            font-size: 20px;
        }

        .section-content {
            padding: 10px;
            display: none;
            text-align: left; /* Reset text alignment */
        }

        /* Style for the image link */
        .pc-builder-image {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 20px auto; /* Centers horizontally */
        }

        /* Style for the image text */
        .clickable-section .overlay-text h3 {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10; /* Increase the z-index value */
            color: white; /* Set text colour to white */
            text-align: center;
        }

@keyframes text-pulse {
    0% {
        text-shadow: 0 0 4px white;
    }
    50% {
        text-shadow: 0 0 8px white;
    }
    100% {
        text-shadow: 0 0 4px white;
    }
}

.clickable-section .overlay-text h3:hover {
    animation: text-pulse 1s infinite;
}

        .ez-page-content {
            text-align: center; /* Center all text content */
        }

.icon-toggle {
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            font-size: 20px;
            color: white;
            z-index: 15;
        }

.icon-plus {
    position: absolute;
    top: 50%;
    right: 10px; /* Adjust as necessary */
    transform: translateY(-50%);
    font-size: 20px; /* Adjust size as needed */
    color: white; /* Change color if needed */
    z-index: 15; /* Make sure it's above other elements */
}

.icon-minus {
    position: absolute;
    top: 50%;
    right: 10px; /* Adjust as necessary */
    transform: translateY(-50%);
    font-size: 20px; /* Adjust size as needed */
    color: red; /* Change color if needed */
    z-index: 15; /* Make sure it's above other elements */
}

    </style>

    <script>
      function toggleSection(sectionId) {
            var section = document.getElementById('section-' + sectionId);
            var iconPlus = section.previousElementSibling.querySelector('.fa-plus-square-o');
            var iconMinus = section.previousElementSibling.querySelector('.fa-minus-square-o');

            if (section.style.display === 'none') {
                section.style.display = 'block';
                iconPlus.style.display = 'none';
                iconMinus.style.display = 'inline'; // or 'block'
            } else {
                section.style.display = 'none';
                iconPlus.style.display = 'inline'; // or 'block'
                iconMinus.style.display = 'none';
            }
        }
    </script>
</head>
<body>
    <div class="ez-page-content">
        <h1>Get Your Dream PC Built!</h1>

        <!-- Customized clickable sections -->
        <div class="clickable-section">
            <div class="section-header-image" onclick="toggleSection(1)">
                <img src="/images/500x100x.png" alt="Image 1 Placeholder">
                <span class="fa fa-plus-square-o icon-toggle"></span>
                <span class="fa fa-minus-square-o icon-toggle" style="display: none;"></span>
                <div class="overlay-text">
                    <h3>Customize your PC with the perfect parts, your way</h3>
                </div>
            </div>
            <div class="section-content" id="section-1" style="display: none;">
                <p>With Crazygamer's PC Builder, you have the freedom to:</p>
                <ul>
                    <li>Choose the components that match your preferences and needs</li>
                    <li>Explore a vast selection of top-quality parts</li>
                    <li>Easily navigate through compatible selections</li>
                </ul>
            </div>
        </div>

        <!-- Placeholder for Section 2 -->
        <div class="clickable-section">
            <div class="section-header-image" onclick="toggleSection(2)">
                <img src="/images/500x100x.png" alt="Image 2 Placeholder">
                <i class="fa fa-plus-square-o icon-toggle"></i>
                <i class="fa fa-minus-square-o icon-toggle" style="display: none;"></i>
                <div class="overlay-text">
                    <h3>Select your desired software</h3>
                </div>
            </div>
            <div class="section-content" id="section-2" style="display: none;">
                <p>You can opt for:</p>
                <ul>
                    <li>Operating systems tailored to your requirements</li>
                    <li>Antivirus software for enhanced security</li>
                    <!-- Add more software options here -->
                </ul>
            </div>
        </div>

        <!-- Placeholder for Section 3 -->
        <div class="clickable-section">
            <div class="section-header-image" onclick="toggleSection(3)">
                <img src="/images/500x100x.png" alt="Image 3 Placeholder">
                <i class="fa fa-plus-square-o icon-toggle"></i>
                <i class="fa fa-minus-square-o icon-toggle" style="display: none;"></i>
                <div class="overlay-text">
                    <h3>Explore an amazing range of essential peripherals</h3>
                </div>
            </div>
            <div class="section-content" id="section-3" style="display: none;">
                <p>Enhance your setup with:</p>
                <ul>
                    <li>Gaming gear for an immersive experience</li>
                    <li>Productivity tools to boost efficiency</li>
                    <!-- Add more peripheral options here -->
                </ul>
            </div>
        </div>

        <p>To start creating your dream PC, <a href="https://www.instorepcbuilder.co.uk/crazygamer">access our PC Builder</a> below:</p>
        <!-- Image link to the PC builder -->
        <a href="https://www.instorepcbuilder.co.uk/crazygamer">
            <img class="pc-builder-image" src="/images/wtwbm_images/hm1-s1-b2.jpg" alt="Build Your PC" />
        </a>
        <p>Quotes are valid for 3 days, and if you need assistance, feel free to watch our tutorial or give us a call. We're here to help!</p>
    </div>
</body>
</html>

---

So I would get some basic knowledge. Try starting Here https://www.w3schools.com/html/ You should be able to see what is still wrong with your code.

i know what your thinking, why doesn't it start with

Code:

---

<!DOCTYPE html>

---

sadly when i start it like that I see the following above my content

Code:

---

OCTYPE html>

---

hmmm, seems this conversation has missed the fact that OP wants this in an ez page. So chatgpt spit you out a static html page.... great, somewhat helpful.
So when you stick the content in the ez-page and being that the site already has doc type, head tags, etc... and you can not have two of them on the page... you omit them from the content.

but a look at the page in question does show that the only thing keeping the font-awesome icons from showing is as follows from https://testing.crazygamer.uk/includ.../lbs/theme.css line 20

Code:

---

[class*=" icon-"], [class^="icon-"] {
  font-family: wokiee !important;

---

When I turn that rule off in the inspector the square-plus and square-minus show up as expected, but I haven't dig into see what other effect turning off font-family: wokiee !important; has across the site.

Thankyou Barco, your a gem bud :)

I personally believe it would effect the fonts on the main pages such as those in the banners if not every font in the site, it may be that the icons disappear elsewhere in the site. The author of the template addressed a question regarding whether the awesome fonts would need updating and they stated the icons where in built with shorthands.

I had suspected the fact it was an easy page that was throwing things out at first, i had eliminated the line with assessing the issue but it didn't pop up as hoped. Between chatgpt and the readdition of the html doc type declaration i felt like I was going round in circles.

The suggested fix from the ai bot was actually to add an important statement to the buttons if it was related to the style of the template overriding it, it then gave me a good few reasons why not to add the statement and said i should reach out to someone familiar with zencart if unsure.

It was actually about 5 hours ago i spotted that very rule and wondered exactly the same as you, would removing that effect other items. I didn't actually know you could get the browser to toggle a rule off, that will be useful to google the instructions on for future reference. I wasn't sure if that was the problem either as i got a call and have been busy since and unable too investigate it further.

So I remove the html header lines and set the icons as important, delete that important statement you identified or is there a better solution? It sounds like the first option may cause issues that i'd see shortly after as i was tweaking other bits

you could also use icons from the wookie font font they have in there. if you go into includes/templates/wookie/css/fonts there is a demo.html that will show you all of the available glyphs in the wookie icon font

legend thank you, I used the demo.html url to view the icons and changed the calls to the included icons for the first tab and it now has fully functional icons, seemed easiest fix for the time being, I assume it would be entirely possible to add my own icons to the wookie font library to get the exact icons i prefer?

I'm having another font issue, this time it's fonts that do not work from adobe fonts for mobile devices but... to be more precise just the font i really like and spent hours sifting though the font catalogue to find.

I have the link in the header and even tried @import (correctly placed, i am slowly learning) and zero errors. Looking on google leads me to the adobe fonts page where i can see others have "wasted hours" trying to get fonts too work. I also followed the guide to get gbp too display and all i see is 0. So much for testing stripe and possibly being good to go by then :/

The website is a project being built in secrecy before being used too replace what currently resides at

Code:

---

crazyfest.co.uk

---

the site is at its secret url for now and is actually the responsive_classic template using background images and awesome font icons its starting too look the part. I was going through changing the colour of the fonts and forms as the plan of action today hoping i would wake up and see £20 next too a test item for a quick checkover of the payment module.

I still need to write the delivery script, privacy policy ect but those are relatively quick jobs to do, mainly ensuring people can get a ticket is the last main job too do, that means stripping the pieces out for my module too work, i didn't have time for odd errors though :s

Anyone had and resolved the same fonts issue?

i'm getting too the point of debating using files from crazygamer too hopefully get the price showing as gbp, it reads like a simple operation in the admin panel but it fails too work, i'm using 1.58a, i'm not sure if i have time too upgrade to 2.0 and find i have upgrade issues too deal with on top with the ticketing module. Ai helped me build it and the dev who debugged it into working order after ai dev stage really had a nightmare with getting it to actually work as intended the other year too :/

UPDATE: Soooo.. currency is working now but on mobiles it displays as usd and not gbp. it seems related to my font issue. i did notice a few of my css rules seemed to not have gaps between yesterday, could it be one of these that is tripping me up that ive not found causing a termination of the stylesheet reading on real life testing?

Code:

---

css rule 1 {
    align-text: centre;
{
css rule 2 {
    align-text: centre;
}

---

should be obviously like this...

Code:

---

css rule 1 {
    align-text: centre;
{

css rule 2 {
    align-text: centre;
}

---

otherwise i'm all out of ideas. I see an "all.css" is called up just before my fonts .css from adobe is setup from the waterfall, I assume this is the issue but i don't see a css file called "all.css" here in my templates css file?

I haven't been following this thread but I notice in the above example you are using 'centre' instead of 'center'

i always realise before i press save. im uk so to me that and color (we spell colour) has got me revisiting things in the past lol

Code:

---

global $locales;
// $locales = ['en_US', 'en_US.utf8', 'en', 'English_United States.1252'];
$locales = array('en_UK', 'en_UK.utf8', 'en', 'English_United States.1252');
@setlocale(LC_TIME, $locales);

---

i'm not sure if it is safe too delete that commented out line but looking at my crazygamer site for files that related too and spotting this difference, thankfully, i am now seeing my prices and they are also displaying correct!

now if only i could work out how to ensure my fonts from adobe typekit load, i think "all.css" is referring to what is specified to dictate the style settings for responsive elements based on the device in use. i can only assume site legal and the slider menu require setting in "responsive.css"

its only todays posts that relate to my current issue. it was a different site but felt very much related to the previous issue that was discussed here and potentially easier oppossed too creating a new thread