Custom liquid divider not working with media query

[KeithKings]

I found some code online to make a simple divider/spacer section with liquid.

I modified it to have different values for mobile and desktop padding.

For some reason, the media query CSS is not working. When I adjust the mobile padding, nothing changes, but I can see in console that the values are changing.

Can someone see what I'm doing wrong?

[osamafarooqi71]

 Hello @KeithKings , would you like to share the store URL. So, I can look further into your request.

Regards, 
Osama Farooqi

[KeithKings]

It's in an unpublished theme, but you can add that code to a liquid file in any theme and see the result.

[namphan · Accepted solution]

Hi @KeithKings,

Please change all code:

{%- style -%}
  .sectionDivider-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top_mobile | append: 'em' }};	
    padding-bottom: {{ section.settings.padding_bottom_mobile | append: 'em' }};
  }

  @media screen and (min-width: 768px) {
    .sectionDivider-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top | append: 'em' }};		
      padding-bottom: {{ section.settings.padding_bottom | append: 'em' }};
    }
  }
{%- endstyle -%}
		
<div		
  class="{% if section.settings.full_width %} page-width{% endif %} sectionDivider sectionDivider-{{ section.id }}-padding">		
  <span style="background: {{ section.settings.color }}	 height: {{ section.settings.height | append: 'px' }}	"></span>
</div>

<style>
  .sectionDivider {
    width: 100%;
    border: 1px solid red; /* Border for visibility */
  }

  .sectionDivider span {
    width: 100%;
    display: block;
    border: 1px solid blue; /* Border for visibility */
  }
</style>

<div>
  <p>Debug Info:</p>
  <p>Full Width: {{ section.settings.full_width }}</p>
  <p>Color: {{ section.settings.color }}</p>
  <p>Height: {{ section.settings.height | append: 'px' }}</p>
  <p>Padding Top Mobile: {{ section.settings.padding_top_mobile | append: 'em' }}</p>
  <p>Padding Bottom Mobile: {{ section.settings.padding_bottom_mobile | append: 'em' }}</p>
  <p>Padding Top: {{ section.settings.padding_top | append: 'em' }}</p>
  <p>Padding Bottom: {{ section.settings.padding_bottom | append: 'em' }}</p>
</div>

{% schema %}
{
  "name": "Section divider",
  "settings": [		
    {		
      "type": "range",		
      "id": "padding_top",		
"min": 0,		
"max": 10,		
"step": 0.1,		
      "unit": "em",		
      "label": "Padding top",		
"default": 1		
    },		
    {		
      "type": "range",		
      "id": "padding_top_mobile",		
"min": 0,		
"max": 10,		
"step": 0.1,		
      "unit": "em",		
      "label": "Padding top mobile",		
"default": 1		
    },		
    {		
      "type": "range",		
      "id": "padding_bottom",		
"min": 0,		
"max": 10,		
"step": 0.1,		
      "unit": "em",		
      "label": "Padding bottom",		
"default": 0		
    },		
    {		
      "type": "range",		
      "id": "padding_bottom_mobile",		
"min": 0,		
"max": 10,		
"step": 0.1,		
      "unit": "em",		
      "label": "Padding bottom mobile",		
"default": 0		
    },		
    {		
      "type": "range",		
      "id": "height",		
      "min": 0,		
      "max": 100,		
      "step": 1,		
      "unit": "px",		
      "label": "Height of the divider",		
      "default": 10		
    },		
    {		
      "type": "color",		
      "id": "color",		
      "default": "#000",		
      "label": "Divider color"		
    },		
    {		
      "type": "checkbox",		
      "id": "full_width",		
      "default": false,		
      "label": "Section full-width"		
    }		
  ],		
  "presets": [		
    {		
      "name": "Section divider"		
    }		
  ]		
}		
{% endschema %}		

[KeithKings]

Excellent! Thank you!

Can you please explain why this works? I noticed you put the media queries between liquid style tags {%- style -%} and that you added a CSS class sectionDivider-{{ section.id }}-padding. 

[namphan]

Hi @KeithKings,

Yes, it will help you differentiate sections from each other, if you have more than 1 section called.

Hope it's clear to you 😊

[namphan]

Hi @KeithKings,

If you have any questions, you can contact me directly.
Happy to help you 😊