Changing font-size through type : range

zepps
New Member
1 0 1

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

 

 

 

Replies 3 (3)
GoranHorvat
Tourist
6 1 2

Hello Jeff. We haven't investigated in depth on our side a way to render that px from the schema but what we usually do is the below workaround:

{{ settings.type_footer_headings | append:'px' }} 

 Do not know if you found a resolution on your own already but I post it here if anyone encounters this in the future.

Cheers!

davidloop
New Member
1 0 0

The unit refers to the range display in the admin. This could be pixels, pounds, ounces, cars, etc ...

davidloop_0-1626202499272.png

 

diego_ezfy
Shopify Partner
2298 413 538

@zepps 

That is the expected behavior. You can simply add "px" after the number.

.item{
font-size: {{ section.settings.font-size}}px; 
}

Kind regards,
Diego

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.