CSS CSS Selectors Selectors - Beyond the Basics DRY CSS

Nicholas Wallen
Nicholas Wallen
12,278 Points

Why did he use width: auto on the media query?

It may be a dumb question, but I typically try to play with the code after he shows us, just so I can see exactly what each line does to it.

How come display: inline-block by itself just doesn't make it display next to eachother? How come we needed to add width: auto?

Mohammed Ali
Mohammed Ali
11,121 Points

margin: auto is used to center block level elements. inline-block puts elements side by side as you say but doesn't center element in container/div. Here's couple good links if you want play/explore more about these. Centering CSS by CSS-Tricks , Margin: auto by Learn Layout. I hope that' helps.

1 Answer

Truong Minh Nguyen
Truong Minh Nguyen
12,574 Points

I think it's because the default width of <input> is 100% so by using width: auto, the width of the input is just its content's width plus padding, border and margin, which makes the buttons smaller so they can fit onto 1 line.