4 ms·

it really depends on what you are trying to make and several common designs are not entirely intuitive. for example, if you want to make a single screen app (t

it really depends on what you are trying to make and several common designs are not entirely intuitive. for example, if you want to make a single screen app (the body doesn't scroll) I know of no css frameworks that do this. Tailwind, Bootstrap, are for height unrestricted pages. I'm not sure what a good example of single screen pages are, maybe codesandbox, google maps, google slides, codepen. Maybe someone has a suggestion for a framework that handles l the conatraints of keeping a bunch of content panes filling the window and no more with all the pane's content able to fill the pane with zero issues. I always find that trying to get say a canvas to be 100% of its container in such a situation to be trial and error. another imo unintuitive CSS design is the Medium style of paragraphs have a max-width but images do not. The arguably normal way to constrain a bunch of content is a wrapper for all of that content and the wrapper is set to the max-width. But that doesn't work if you want images to go bigger than that wrapper. I'm not saying it's hard, only that it was different than just about every previous site out there. and imo "margin: 0 auto" is not an intuitive way of centering (not saying they did it first)

Macha 5y ago
For the first paragraph: Put your outermost container as { box-sizing: border-box; width: 100vw; height: 100vh; overflow: none; } vw/vh are units based on the viewport width and height. 1vw is 1% of the viewport interior width, 1vh is the same for height. The border box box model ensures that padding and borders subtract from the interior dimensions rather than add to the exterior dimensions. You may also want to use <meta viewport> to control zooming on mobile devices: https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_m... Then you can use grid to divvy up that internal space without having to deal with the kind of rounding issues that using ems or %s used to have
- gfxgirl 5y ago
  you failed :P height: 100vh does not work on mobile http://google.com/search?q=100vh+mobile http://google.com/search?q=100vh+mobile Grid might solve some issues that Flexbox didn't but my experience is that without fail, I try to make the various panes, then I try to put some content inside the panes and either (a) the content doesn't correctly fill the panes (b) the panes get warped in ways I wasn't expecting because of the content. And, it's always a bunch of trial and error and unintuitive crap like "max-width: 0" to get it to work

Macha 5y ago

For the first paragraph: Put your outermost container as { box-sizing: border-box; width: 100vw; height: 100vh; overflow: none; } vw/vh are units based on the viewport width and height. 1vw is 1% of the viewport interior width, 1vh is the same for height. The border box box model ensures that padding and borders subtract from the interior dimensions rather than add to the exterior dimensions. You may also want to use <meta viewport> to control zooming on mobile devices: https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_m... Then you can use grid to divvy up that internal space without having to deal with the kind of rounding issues that using ems or %s used to have

gfxgirl 5y ago
you failed :P height: 100vh does not work on mobile http://google.com/search?q=100vh+mobile http://google.com/search?q=100vh+mobile Grid might solve some issues that Flexbox didn't but my experience is that without fail, I try to make the various panes, then I try to put some content inside the panes and either (a) the content doesn't correctly fill the panes (b) the panes get warped in ways I wasn't expecting because of the content. And, it's always a bunch of trial and error and unintuitive crap like "max-width: 0" to get it to work