css breakfast #2

a meandering list of responsive tips

height + width... do not do it

just don't. it is better to not use height or width to set the size for a responsive element!! instead it is better to set a min-height or max-width!

setting a specific height or width can cause wonky overflow issues. barf horizontal scrolling. ew.

using a max or min allows the elements to shrink or grown properly.

it is a little hard to remember but for heights you want min and for widths you want max.

here it is in action:

.container {
    max-width: 960px;
    min-height: 500px;
    margin-inline: auto;
}

note: that these general rules do not follow for elements with small specific sizes, maybe like a user's avatar or icons.

sometimes css is not as it seems!

try this example out:

body {
  width: 100vw;
  height: 100vh;
  border: red solid 4px;
}

notice the horizontal scrolling!?!? what the heck, right? turns out that the scrollbar is actually taking up some of that screen real estate!!

less is more in this case. no need to declare that 100vh when the element is already a block. taking up all the room it needs.

better to use something like width: auto;. as a general rule, it is best to work with the browser than against it.

counterintuitively viewport units are not more responsive... in fact, they do not quite work the way you think they are going to! using them in clamp might be a use case see my previous article. but really just better avoid them for now.

overflowing images?? clean it up

i love this one cause it is just one little line of css that does the trick!! bam. no mo' overflo'.

img {
  display: block;
  max-width: 100%;
}

let the browser do its thang

using flex + wrap can do away with the need for specific media queries!! in the example below, instead of declaring widths for the containing unordered list element, best to let the browser figure out those wrap points for you!!

ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 3rem;
}

that concludes this little css breakfast!! thanks for reading. and if you take anything away from this post, let it be "work with the browser. it is your bestie."

source:

• "A practical guide to responsive web design", Kevin Powell, https://youtu.be/x4u1yp3Msao?si=nPD0eUGxF1kcttVq

if anything is wrong lemme know! i aint perfect.