Changing font-size through type : range

New Member
1 0 0

Hey,  good morning to you all.

I am having some strange behaviour while trying to modify a font-size in a footer.

I am using the debut theme as my base and doing some customizations for learning purposes.

I use Firefox developer edition for my debugging

I had setup some settings in footer.liquid . In this settings I am allowing the customer to change the font-size of my footer menu.

I used the type range for that.

This is the way I used it :

    "type": "range",
    "id": "font_size_footer_menu",
    "min":  22,
    "max":  38,
    "step":  1,
    "unit": "px" ,
    "label": "Font size",
    "default":  22


The json goes fine through theme kit , no problem whatsoever

It also renders on the browser the slider for the range. Looking fine too.

But what is not being captured for some reason is the "px"  as a unit .

Look at what happens in  the browser :

using Firefox developer editionusing Firefox developer edition



font-size: 22;

The px does not render .

Isn´t that odd ?

If I include manually , using firefox inspector , the px at the end of css line than it works fine.


Any ideas on what I did wrong ?

I tried many diffenre things ramdonly like :

  • changed the unit to rem
  • reviewed the json file
  • put a space between the " and the px
  • put a space before the comma on json- (don´t laugh , I am a begginner ,please)
    "unit": "px" ,

 Maybe this is something someone already had in the past and have an easy fix.

Maybe I can not change the font size with the range in a footer menu ?

Well, hopefully someone can help out on this.

Much appreciated

Jeff Borges