If the browser window is small enough, the layout is stacked so that the "side" section sits on top of the main section. This means that the main section gets wider when the browser gets narrower. Some other elements, within the main section, are also layouted differently depending on width. Relying only on the browser width makes this a bit silly in that certain browser-width span.
If the browser window is small enough, the layout is stacked so that the "side" section sits on top of the main section. This means that the main section gets wider when the browser gets narrower. Some other elements, within the main section, are also layouted differently depending on width. Relying only on the browser width makes this a bit silly in that certain browser-width span.
A recent addition to CSS solves this with container queries, using which we could layout depending on the width of the main section instead. See https://tailwindcss.com/blog/tailwindcss-v3-2#container-queries