CSS working well on VScode, but doesn't give same output in Shopify (using custom CSS)

[EspressoEd]

HTML code

<link rel="stylesheet" href="Icons-Test.css">
    <title>Icons</title>

<div class="Icon-container">

        <div class="IconImg">
            <img src="<https://cdn.shopify.com/s/files/1/0549/8745/6601/t/7/assets/01-No-artificial-fragrances.png?v=1671295811>" alt="No artificial fragrances" width="100">
                <h3>No Artificial Fragrances</h3> 
        </div>

        <div class="IconImg">
            <img src="<https://cdn.shopify.com/s/files/1/0549/8745/6601/t/7/assets/02-Natural-Actives.png?v=1671295818>" alt="Natural actives" width="100">
                <h3>Natural Actives</h3> 
        </div>

        <div class="IconImg">
            <img src="<https://cdn.shopify.com/s/files/1/0549/8745/6601/t/7/assets/03-Biodegradable-Ingredients.png?v=1671295827>" alt="Biodegradable ingredients" width="100">
                <h3>Biodegradable Ingredients</h3> 
        </div>

        <div class="IconImg">
            <img src="<https://cdn.shopify.com/s/files/1/0549/8745/6601/t/7/assets/04-Cruelty-free.png?v=1671295837>" alt="Cruelty-free" width="100">
                <h3>Cruelty-free</h3>
        </div>

        <div class="IconImg">
            <img src="<https://cdn.shopify.com/s/files/1/0549/8745/6601/t/7/assets/05-Safe-Preservatives.png?v=1671295845>" alt="Safe Preservatives" width="100">
                <h3>Safe Preservatives</h3> 
        </div>

        <div class="IconImg">
            <img src="<https://cdn.shopify.com/s/files/1/0549/8745/6601/t/7/assets/06-Recycleable-Packaging.png?v=1671295855>" alt="Recycleable Packaging" width="100">
                <h3>Recycleable Packaging</h3> 
        </div>

  </div>

CSS code

.Icon-container { display: flex; flex-wrap: wrap; margin: auto; }

.IconImg { margin: auto; padding: 20px; font-family: "Domine", serif; font-size: 1rem; width: 150; word-break: break-word; color: #2f5350; text-align: center; }

[Moira · Accepted solution]

Hey @EspressoEd,

There are a few potential reasons why your CSS might be working in VScode but not in Shopify. Here are a few possibilities to consider:

1. Make sure that you have correctly linked your CSS file in the HTML file. Check the file path to ensure that it is correct and that the file is in the correct location.

2. Make sure that the CSS file is correctly formatted. Check for any syntax errors or typos that might be causing issues.

3. Check the Shopify theme settings to ensure that your custom CSS is being applied to the relevant pages. Some themes might have settings that allow you to specify which pages or templates your custom CSS should be applied to.

4. Make sure that your CSS selectors are correctly targeting the elements that you want to style. Check the HTML code to ensure that the class names in your CSS match the class names used in the HTML.

5. Consider using the browser's developer tools to debug the issue. This can help you identify any errors or issues that might be causing the problem.

Let me know if you have any other questions or if you need further assistance.

[GemPages]

Hello @EspressoEd ,

I checked your code and found that this code only works when you also have a CSS file named Icons-Test.css in your Shopify theme code.

You could please try adding the code like that:

<style>
.Icon-container { display: flex; flex-wrap: wrap; margin: auto; }

.IconImg { margin: auto; padding: 20px; font-family: "Domine", serif; font-size: 1rem; width: 150; word-break: break-word; color: #2f5350; text-align: center; }
</style>
<div class="Icon-container">
        <div class="IconImg">
            <img src="<https://cdn.shopify.com/s/files/1/0549/8745/6601/t/7/assets/01-No-artificial-fragrances.png?v=1671295811>" alt="No artificial fragrances" width="100">
                <h3>No Artificial Fragrances</h3> 
        </div>

        <div class="IconImg">
            <img src="<https://cdn.shopify.com/s/files/1/0549/8745/6601/t/7/assets/02-Natural-Actives.png?v=1671295818>" alt="Natural actives" width="100">
                <h3>Natural Actives</h3> 
        </div>

        <div class="IconImg">
            <img src="<https://cdn.shopify.com/s/files/1/0549/8745/6601/t/7/assets/03-Biodegradable-Ingredients.png?v=1671295827>" alt="Biodegradable ingredients" width="100">
                <h3>Biodegradable Ingredients</h3> 
        </div>

        <div class="IconImg">
            <img src="<https://cdn.shopify.com/s/files/1/0549/8745/6601/t/7/assets/04-Cruelty-free.png?v=1671295837>" alt="Cruelty-free" width="100">
                <h3>Cruelty-free</h3>
        </div>

        <div class="IconImg">
            <img src="<https://cdn.shopify.com/s/files/1/0549/8745/6601/t/7/assets/05-Safe-Preservatives.png?v=1671295845>" alt="Safe Preservatives" width="100">
                <h3>Safe Preservatives</h3> 
        </div>

        <div class="IconImg">
            <img src="<https://cdn.shopify.com/s/files/1/0549/8745/6601/t/7/assets/06-Recycleable-Packaging.png?v=1671295855>" alt="Recycleable Packaging" width="100">
                <h3>Recycleable Packaging</h3> 
        </div>
  </div>

If you require any further information, feel free to contact me.

Best regards,
GemPages Support Team