[{"data":1,"prerenderedAt":354},["ShallowReactive",2],{"doc-content/docs/developer/making-widgets-scale":3,"doc-surroundings/docs/developer/making-widgets-scale":261,"docs-navigation":270},{"path":4,"draft":5,"date":6,"dateUpdated":7,"title":8,"body":9,"description":260,"image":6,"imageAlt":6},"/docs/developer/making-widgets-scale",false,null,"2025-05-15","Making Widgets Scale",{"type":10,"value":11,"toc":256},"minimark",[12,16,20,25,33,40,44,70,252],[13,14,8],"h1",{"id":15},"making-widgets-scale",[17,18,19],"p",{},"Because users can resize widgets any size they wish (within a widget's constraints and/or the dimensions of their computer screen), it's important that the developer write CSS that allows a widget to scale. Here are some tips.",[21,22,24],"h2",{"id":23},"use-css-ems-or-percentages","Use CSS ems or Percentages",[17,26,27,28,32],{},"The best way to allow a widget to change size gracefully is to use CSS ",[29,30,31],"code",{},"ems"," for font sizes, border widths, shadows, or any attributes that need to grow or shrink when a widget is resized. Using percentages can also also graceful scaling.",[34,35,37],"alert",{"type":36},"info",[17,38,39],{},"Avoid the use of pixel values, as these are absolute values that will remain fixed regardless of the size of the widget. For example, if you set a border width to 5 pixels, it will always be 5 pixels no matter how big or small the widget is resized to. Using ems or percentages will allow the border width to expand based on the size of the widget.",[21,41,43],{"id":42},"css-min-and-max","CSS Min and Max",[17,45,46,47,49,50,57,58,63,64,69],{},"Even though using ",[29,48,31],{}," solves most widget scaling problems, when a widget is scaled very large or very small, font sizes or other elements may still exhibit some rendering problems. You can usually solve this by using the CSS ",[51,52,56],"a",{"href":53,"rel":54},"https://developer.mozilla.org/en-US/docs/Web/CSS/min",[55],"nofollow","min",", ",[51,59,62],{"href":60,"rel":61},"https://developer.mozilla.org/en-US/docs/Web/CSS/max",[55],"max",", and ",[51,65,68],{"href":66,"rel":67},"https://developer.mozilla.org/en-US/docs/Web/CSS/clamp",[55],"clamp"," functions:",[71,72,77],"pre",{"className":73,"code":74,"language":75,"meta":76,"style":76},"language-css shiki shiki-themes github-dark github-dark",".too-small {\n    /* Prevent the font size from becoming smaller than 14px */\n    font-size: max(1em, 14px);\n}\n\n.too-big {\n    /* Prevent the font size from becoming larger than 50px */\n    font-size: min(1em, 50px);\n}\n\n.bordered {\n    /* You can also use min and max for other properties like borders */\n    /* This prevents the border from becoming smaller than 1 pixel */\n    border: max(1em, 1px) solid firebrick;\n}\n","css","",[29,78,79,92,99,132,138,145,153,159,183,188,193,201,207,213,247],{"__ignoreMap":76},[80,81,84,88],"span",{"class":82,"line":83},"line",1,[80,85,87],{"class":86},"sFR8T",".too-small",[80,89,91],{"class":90},"suv1-"," {\n",[80,93,95],{"class":82,"line":94},2,[80,96,98],{"class":97},"sJ8bj","    /* Prevent the font size from becoming smaller than 14px */\n",[80,100,102,106,109,111,114,117,121,123,126,129],{"class":82,"line":101},3,[80,103,105],{"class":104},"s8ozJ","    font-size",[80,107,108],{"class":90},": ",[80,110,62],{"class":104},[80,112,113],{"class":90},"(",[80,115,116],{"class":104},"1",[80,118,120],{"class":119},"sOPea","em",[80,122,57],{"class":90},[80,124,125],{"class":104},"14",[80,127,128],{"class":119},"px",[80,130,131],{"class":90},");\n",[80,133,135],{"class":82,"line":134},4,[80,136,137],{"class":90},"}\n",[80,139,141],{"class":82,"line":140},5,[80,142,144],{"emptyLinePlaceholder":143},true,"\n",[80,146,148,151],{"class":82,"line":147},6,[80,149,150],{"class":86},".too-big",[80,152,91],{"class":90},[80,154,156],{"class":82,"line":155},7,[80,157,158],{"class":97},"    /* Prevent the font size from becoming larger than 50px */\n",[80,160,162,164,166,168,170,172,174,176,179,181],{"class":82,"line":161},8,[80,163,105],{"class":104},[80,165,108],{"class":90},[80,167,56],{"class":104},[80,169,113],{"class":90},[80,171,116],{"class":104},[80,173,120],{"class":119},[80,175,57],{"class":90},[80,177,178],{"class":104},"50",[80,180,128],{"class":119},[80,182,131],{"class":90},[80,184,186],{"class":82,"line":185},9,[80,187,137],{"class":90},[80,189,191],{"class":82,"line":190},10,[80,192,144],{"emptyLinePlaceholder":143},[80,194,196,199],{"class":82,"line":195},11,[80,197,198],{"class":86},".bordered",[80,200,91],{"class":90},[80,202,204],{"class":82,"line":203},12,[80,205,206],{"class":97},"    /* You can also use min and max for other properties like borders */\n",[80,208,210],{"class":82,"line":209},13,[80,211,212],{"class":97},"    /* This prevents the border from becoming smaller than 1 pixel */\n",[80,214,216,219,221,223,225,227,229,231,233,235,238,241,244],{"class":82,"line":215},14,[80,217,218],{"class":104},"    border",[80,220,108],{"class":90},[80,222,62],{"class":104},[80,224,113],{"class":90},[80,226,116],{"class":104},[80,228,120],{"class":119},[80,230,57],{"class":90},[80,232,116],{"class":104},[80,234,128],{"class":119},[80,236,237],{"class":90},") ",[80,239,240],{"class":104},"solid",[80,242,243],{"class":104}," firebrick",[80,245,246],{"class":90},";\n",[80,248,250],{"class":82,"line":249},15,[80,251,137],{"class":90},[253,254,255],"style",{},"html pre.shiki code .sFR8T, html code.shiki .sFR8T{--shiki-default:#B392F0;--shiki-dark:#B392F0}html pre.shiki code .suv1-, html code.shiki .suv1-{--shiki-default:#E1E4E8;--shiki-dark:#E1E4E8}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s8ozJ, html code.shiki .s8ozJ{--shiki-default:#79B8FF;--shiki-dark:#79B8FF}html pre.shiki code .sOPea, html code.shiki .sOPea{--shiki-default:#F97583;--shiki-dark:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":76,"searchDepth":94,"depth":94,"links":257},[258,259],{"id":23,"depth":94,"text":24},{"id":42,"depth":94,"text":43},"Tips for making your Hologram widgets scale responsively.",[262,266],{"title":263,"path":264,"stem":265,"children":-1},"Creating Widget Presets","/docs/developer/widget-presets","docs/developer/06.widget-presets",{"title":267,"path":268,"stem":269,"children":-1},"Simple Widget Example","/docs/developer/simple-example","docs/developer/07.simple-example",[271],{"title":272,"path":273,"stem":274,"children":275,"navigation":143},"Welcome to Hologram","/docs","docs/0.index",[276,277,281,285,289,348],{"title":272,"path":273,"stem":274,"navigation":143},{"title":278,"path":279,"stem":280,"navigation":143},"Themes & Wallpapers","/docs/themes","docs/1.themes",{"title":282,"path":283,"stem":284,"navigation":143},"Widgets","/docs/widgets","docs/2.widgets",{"title":286,"path":287,"stem":288,"navigation":143},"Settings","/docs/settings","docs/4.settings",{"title":290,"navigation":291,"sectionTitle":292,"collapsible":143,"path":293,"stem":294,"children":295,"page":5},"Developer",{"sectionTitle":292,"collapsible":143},"Developing Widgets","/docs/developer","docs/developer",[296,300,306,310,314,318,319,321,322,326,332,336,340,344],{"title":297,"path":298,"stem":299,"navigation":143},"Widget Developer Guide","/docs/developer/guide","docs/developer/01.guide",{"title":301,"path":302,"stem":303,"navigation":304,"sectionTitle":305},"Hologram Widget Class","/docs/developer/widget-class","docs/developer/02.widget-class",{"sectionTitle":305},"Building Widgets",{"title":307,"path":308,"stem":309,"navigation":143},"Widget Config","/docs/developer/widget-config","docs/developer/03.widget-config",{"title":311,"path":312,"stem":313,"navigation":143},"Widget Settings","/docs/developer/widget-settings","docs/developer/04.widget-settings",{"title":315,"path":316,"stem":317,"navigation":143},"Widget Color Settings","/docs/developer/widget-color-settings","docs/developer/05.widget-color-settings",{"title":263,"path":264,"stem":265,"navigation":143},{"title":8,"path":4,"stem":320,"navigation":143},"docs/developer/07.making-widgets-scale",{"title":267,"path":268,"stem":269,"navigation":143},{"title":323,"path":324,"stem":325,"navigation":143},"Apple Script","/docs/developer/apple-script","docs/developer/08.apple-script",{"title":327,"path":328,"stem":329,"navigation":330,"sectionTitle":331},"Hologram API","/docs/developer/api","docs/developer/10.api",{"sectionTitle":331},"API Reference",{"title":333,"path":334,"stem":335,"navigation":143},"Weather","/docs/developer/weather","docs/developer/11.weather",{"title":337,"path":338,"stem":339,"navigation":143},"Timer","/docs/developer/timer","docs/developer/12.timer",{"title":341,"path":342,"stem":343,"navigation":143},"Utility Class","/docs/developer/util","docs/developer/13.util",{"title":345,"path":346,"stem":347,"navigation":143},"Third Party Libraries","/docs/developer/third-party","docs/developer/14.third-party",{"title":349,"path":350,"stem":351,"navigation":352,"sectionTitle":353},"Frequently Asked Questions","/docs/faq","docs/faq",{"sectionTitle":353},"Help",1755585913038]