Question about Liquid / Css / Schema relationships

20 1 1


I have this hero I want to add a .svg to which positions within its' div I want to control.

The below code works okay, but because of the aspect ratio (desktop / mobile) I´d like to add a factor to the css values - so that 10% left on mobile perhaps would be 10 * 1.2% or whatever on mobile.


        {%- if block.settings.freeiconurl != blank -%}
		  <img src="{{ block.settings.freeiconurl | asset_url }}"  alt="{{ }}" itemprop="logo" 
               style="position: absolute; top:{{ block.settings.freeiconpos_vertical }}vh; left:{{ block.settings.freeiconpos_horizontal }}vw;">
          {%- endif -%}


My first thought as that I could do this in the css:



$pos_vertical: {{ block.settings.freeiconpos_vertical }};
  top: $pos_vertical;
      @include media-query($small) {
   top: $factor * 1.2;

but that won't work because block.settings aren't global.


So my question to you is do you know of any other way to do this?


thanks guys!