Custom liquid divider not working with media query

Store Design
1

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?

2

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

Regards,
Osama Farooqi

3

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

4

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

  

Debug Info:

  

Full Width: {{ section.settings.full_width }}

  

Color: {{ section.settings.color }}

  

Height: {{ section.settings.height | append: 'px' }}

  

Padding Top Mobile: {{ section.settings.padding_top_mobile | append: 'em' }}

  

Padding Bottom Mobile: {{ section.settings.padding_bottom_mobile | append: 'em' }}

  

Padding Top: {{ section.settings.padding_top | append: 'em' }}

  

Padding Bottom: {{ section.settings.padding_bottom | append: 'em' }}

{% 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 %}
1 Like
5

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.

6

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 :blush:

1 Like
7

Hi @KeithKings ,

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

1 Like