Solved

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

EspressoEd
Visitor
1 0 0

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; }

Accepted Solution (1)

Moira
Shopify Staff
2061 225 327

This is an 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.

Moira | Social Care @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog

View solution in original post

Replies 2 (2)

Moira
Shopify Staff
2061 225 327

This is an 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.

Moira | Social Care @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog

GemPages
Shopify Partner
5589 1261 1221

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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center