Formating on theme after push doesn't match development

[nealrm]

I duplicated and modified an existing theme. I pulled the theme files using the CLI, edited the theme using VS code and checked the results. I then push the theme to as follows: 

```

shopify theme push --theme "Ver 1.02 (July 17, 2023)"
┏━━ Pushing theme files to Ver 1.02 (July 17, 2023) (#########6226) on inland-cape-rice.myshopify.com
┃ 100%
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ (3.71s) ━━━
√ Your theme was pushed successfully

View your theme:
https://[company name]/?preview_theme_id=########6226

Customize this theme in the Theme Editor:
https://[company name]/admin/themes/#######6226/editor

I then returned to development to compare the two. 

July 12> shopify theme dev
╭─ success ──────────────────────────────────────────────────────────────────────────────────╮
│ │
│ Preview your theme │
│ • http://127.0.0.1:9292 [1] │
│ │
│ Next steps │
│ • Customize your theme at the theme editor [2] │
│ • Share your theme preview [3] │
│ │
╰────────────────────────────────────────────────────────────────────────────────────────────╯
[1] http://127.0.0.1:9292
[2] https://[company name]/admin/themes/########9234/editor
[3] https://[company name]/?preview_theme_id=########9234

The formats on the two are very different. The pushed theme looks like this:

The theme on the development side looks like this:

Template page code:

<div id='scasl-app-container' class="new-for-mobile" style="display:none">

  <div class="bh-sl-container scasl-container" style="margin-top:150px" >

      {% section 'store_logos' %}

  </div>

</div>

store_logos code:

{% stylesheet %}

    .debug {

        outline:solid 1px blue;

    }

    .center-block {

        display: block;

        margin-inline: auto;

        width: max-content;

        max-width: 96%;

    }

    .logoHolder {

        display: flex;

        justify-content: center;

        align-items: center;

        align-content: space-between;

        flex-wrap: wrap;

        flex-direction: row;

        gap: clamp(20px, 5vw, 50px);

        margin-bottom:50px;

        margin-inline:auto;

        width: 70%;

    }

    .title {

        font-size: clamp( 12px, 5vw, 48px) !important;

        margin-bottom: 80px !important;

        text-align: center;

    }

    @media screen and (max-width: 1800px) {

    }

{% endstylesheet %}

<div class="col-lg-12 ">

    <h2 class="center-block title">

        {% case section.settings.font_case %}

            {% when 'capitalize' %}

                {{ section.settings.title | capitalize }}

            {% when 'upcase' %}

                {{ section.settings.title | upcase }}

            {% when 'downcase' %}

                {{ section.settings.title | downcase }}

            {% else %}

                {{ section.settings.title | upcase }}

        {% endcase %}

    </h2>

    <div class="logoHolder">

        {% for logo in section.blocks %}

            {{ logo.settings.logo | img_url: logo.settings.logo_size | img_tag }}

        {% endfor %}

    </div>

</div>

{% schema %}

    {

        "name": "Store Logos Section",

        "class": "store-logos",

        "settings": [

            {

                "id": "title",

                "type" : "text",

                "label" : "Store logos title",

                "default" : "Find our rice at these great stores"

            },

            {

                "id": "font_case",

                "type": "select",

                "label": "Font Case",

                "options": [

                    { "value": "upcase", "label": "Upper Case"},

                    { "value": "capitalize", "label": "Capitalize"},

                    { "value": "downcase", "label": "Lower Case"}

                ],

                "default": "capitalize"

            }

        ],

        "blocks":[

            {

                "name": "store logos",

                "type": "store_logos",

                "settings": [

                    {

                        "id":"logo",

                        "type":"image_picker",

                        "label":"Logo"

                    },

                    {

                        "id": "logo_size",

                        "type": "text",

                        "label": "Logo Size",

                        "default": "200x"

                    },

                    {

                        "id": "store",

                        "type": "text",

                        "label": "Store Name"

                    }

                ]

            }

        ]

    }

{% endschema %}

Why is the theme that was pushed to shopify displaying differently than the theme in development?

[nealrm]

Let's keep this online so that others can learn from this.

[Liam]

Hi Nealrm - it sounds like the theme on the live Shopify store is not accepting the changes from the development environment, is that correct? 

Can I ask what version of the CLI you're using? There may be a syncing issue that was resolved in recent CLI versions.

[nealrm]

Thanks for the reply. The CLI version is 3.47.5. 

I checked the code using the code editor on the Shopify site. It appears to be identical. 

[nealrm]

On a hunch, I replaced "{% stylesheet %}" with "<style>". That worked. Not sure why the template was not accepting the CSS inside the code tag, but it clearly was not.