Viewport Width Units In CSS

[et_pb_section fb_built=”1″ _builder_version=”4.19.1″ _module_preset=”default” da_disable_devices=”off|off|off” global_colors_info=”{}” da_is_popup=”off” da_exit_intent=”off” da_has_close=”on” da_alt_close=”off” da_dark_close=”off” da_not_modal=”on” da_is_singular=”off” da_with_loader=”off” da_has_shadow=”on”][et_pb_row _builder_version=”4.19.1″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.19.1″ _module_preset=”default” global_colors_info=”{}”][et_pb_post_title meta=”off” featured_image=”off” _builder_version=”4.19.1″ _module_preset=”default” global_colors_info=”{}”][/et_pb_post_title][et_pb_text _builder_version=”4.19.1″ _module_preset=”default” global_colors_info=”{}”]Let’s say you have a simple problem: that problem is to make text match a set width or height regardless of the view screen’s size. The answer: using CSS and the viewport sizing. Below are some quick examples of what text looks like when different viewport sizes are applied. One unit in the width 0.5% of the viewport’s width. One unit in the viewport’s height is equivalent to 1% of the available height. If you want the text to be 10% of the view port height? That would be done with font-size: 10vh;

1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger

When you use this, experiment! Other CSS rules may not entirely cooperate with viewport sizing. Your mileage may vary.

---

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.19.1″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”1_2″ _builder_version=”4.19.1″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.19.1″ _module_preset=”default” global_colors_info=”{}”]Variable based on height.

 .largeheight {
  font-size: 2vh;
  }

[/et_pb_text][et_pb_text _builder_version=”4.19.1″ _module_preset=”default” global_colors_info=”{}”]Variable based on minimum.

 .largemin {
  font-size: 2vmin;
  }

[/et_pb_text][et_pb_text _builder_version=”4.19.1″ _module_preset=”default” global_colors_info=”{}”]Variable based on maximum.

 .largemax {
  font-size: 2vmax;
  }

[/et_pb_text][et_pb_text _builder_version=”4.19.1″ _module_preset=”default” global_colors_info=”{}”]0123456789

 .largetenheight {
  font-size: 10vh;
  line-height: 10vh; 
  }

[/et_pb_text][/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.19.1″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.19.1″ _module_preset=”default” global_colors_info=”{}”]Variable based on width.

.largewidth {
  font-size: 2vw;
  }

[/et_pb_text][et_pb_text _builder_version=”4.19.1″ _module_preset=”default” global_colors_info=”{}”]12345

 .largetenwidth {
  font-size: 20vw;
  line-height: 20vw; 
  }

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.19.1″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.19.1″ _module_preset=”default” global_colors_info=”{}”][et_pb_code admin_label=”IFrame Code” _builder_version=”4.19.1″ _module_preset=”default” global_colors_info=”{}”]Want to convert CSS units into variable units?[/et_pb_code][et_pb_code admin_label=”CSS Code” _builder_version=”4.19.1″ _module_preset=”default” global_colors_info=”{}”] [/et_pb_code][/et_pb_column][/et_pb_row][/et_pb_section]