Question about Liquid / Css / Schema relationships

Highlighted
Excursionist
20 1 1

Hello, 

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="{{ shop.name }}" 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 }};
.freeicon{
  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!

 

Pelle

 

 

 

 

 

 

 

 

 

0 Likes