vh   164

« earlier    

Some Things You Oughta Know When Working with Viewport Units
You'd expect that button in the graphic to be visible (assuming this element is at the top of the page and you haven't scrolled) since it's along the bottom edge of a 100vh element. But it's actually hidden behind the browser chrome in mobile browsers, including iOS Safari or Android Chrome.
fridayfrontend  css  cssbasics  vh  viewport 
4 days ago by spaceninja
Some Things You Oughta Know When Working with Viewport Units | CSS-Tricks
about the 100vh problem on mobiles (it's calculated without including address bar height)
webdesign  web  design  vw  vh  viewport  width  height  css  100  100% 
5 days ago by piperh
Avoid 100vh On Mobile Web | chanind.github.io
Explains that 100vh on mobile sets vh to height of window with address panel hidden, so that when address bar is visible then window is smaller but vh won't update itself.
See comments at bottom for workarounds
webdesign  web  design  webdev  mobile  css  100vh  vh  100  height  screen  viewport  js  javascript  script  window  innerheight 
4 weeks ago by piperh
Avoid 100vh On Mobile Web
The core issue is that mobile browsers (I’m looking at you, Chrome and Safari) have a “helpful” feature where the address bar is sometimes visible and sometimes hidden, changing the visible size of the viewport. Rather than adjusting the height of 100vh to be the visible portion of the screen as the viewport height changes, these browsers instead have 100vh set to the height of the browser with address the address bar hidden. The result is that the bottom portion of the screen will be cut off when the address bar is visible, thus defeating the purpose of 100vh to begin with.
fridayfrontend  css  cssbasics  layout  viewport  vh  mobile 
4 weeks ago by spaceninja
The trick to viewport units on mobile | CSS-Tricks
(Mat Atkinson recommended this post in case you might ever need to read up on viewport units.)

“Viewport units have always been controversial and some of that is because of how mobile browsers have made things more complicated by having their own opinions about how to implement them.”
css  viewport  vh  vw  2019  recommendations 
august 2019 by handcoding
Responsive spacing with viewport and ch units
What I wanted with some elements of my site was some padding around them that was responsive to the viewport in both directions. The smaller the viewport — in either dimension, the tighter the element could be. When the user’s viewport was large, it could be very roomy. I found that using both vw and vh units made this quite easy — and without media queries.
fridayfrontend  css  layout  vw  vh  viewport  ch  units  responsive  cssbasics 
march 2019 by spaceninja
Soul Machines
Soul Machines is humanizing the interface between people and machines by
bringing technology to life with emotionally responsive digital humans.
ai  chatbot  vh 
march 2019 by dgafni
CSS Units
https://www.w3schools.com/cssref/css_units.asp ;;;
tags: CSS Units fontSize font size search for em rem vw vh vmin vmax ;;;
tags:: w3schools CSS Units fontSize font size search for em rem vw vh vmin vmax fontSize relatve to viewport screen width
w3schools  CSS  Units  fontSize  font  size  search  for  em  rem  vw  vh  vmin  vmax  relatve  to  viewport  screen  width  needsEditing 
november 2018 by neerajsinghvns

« earlier    

related tags

%  100%  100  100vh  2016  2017  2019  @supports  adaptive  ai  apple  aspect-ratio  bleed  blend  blending  blendmodes  blink  blog  browsers  bug  bugfix  bugs  button  calc  calculations  card  centre  ch  chatbot  checkbox  checkboxes  chrome  clevermarks  codepen  counter  counters  css-variables  css  css3  cssbasics  csslocks  csstricks  currentcolor  design  display  em  ems  ex  example  feedly  firefox  fittext  fix  flexbox  fluid  font-size  font  fontsize  for  fridayfrontend  full  fullscreen  goaltender  gradient  gradients  grid  guide  hamburger  hardwareacceleration  head  heading  headline  height  howto  html  hybrid  image  images  innerheight  interesting  interface  interpolation  ios  ios7  javascript  js  keyword  large  layout  less  linearinterpolation  locks  measure  media-queries  menu  mobile  modal  mode  neattrick  needsediting  nhoizey  object-fit  percent  percents  pica  pixel  point  polyfill  position  radio  recommendations  reference  relative  relatve  rem  responsive  responsivedesign  responsiveimages  responsivewebdesign  reverse  safari  sass  saved  scaling  screen  script  scroll  scrollbar  scss  search  selection  shadow  simplicity  size  small  spacing  standards  sticky  supports  text  tips  to  todo:link  transition  transitions  tricks  tutorial  twitter  type  typescale  typography  ui  unit  units  urlbar  ux  viamobilewebweekly  view-height  view-width  view  viewport-height  viewport  viewportunits  vmax  vmin  vw  w3schools  web  webdesign  webdev  webkit  weekly.rc  width  window  z-index 

Copy this bookmark: