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](https://[company) name]/?preview_theme_id=########6226

Customize this theme in the Theme Editor:
https://[[company](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](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](http://127.0.0.1:9292)
[2] https://[[company](https://[company) name]/admin/themes/########9234/editor
[3] [https://](https://inland-cape-rice.myshopify.com/?preview_theme_id=122730119234)[[company](https://[company)[ name]/?preview_theme_id=########9234](https://inland-cape-rice.myshopify.com/?preview_theme_id=122730119234)

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

![pushed theme.png|1821x306](upload://ypNtZtTuCffRegOFXEsowSxoNPJ.png)

The theme on the development side looks like this:

![Development Theme.png|1812x550](upload://h7qc2Zw8BgFHhZZti1zitz0kTlx.jpeg)

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 “”. That worked. Not sure why the template was not accepting the CSS inside the code tag, but it clearly was not.