Non-responsive Semantic-UI

In fact, Semantic-UI's grid system, container and many other components are by default "non-responsive", they will grow or shrink as screen width changes, but they will not stack vertically on a small screen, unless you add "stackable" to it. You can also fix the container's width with simple CSS.

Here are some keywords related to responsiveness:

Stackable: stack the items vertically on small screens
Doubling: double the items' width on every screen width breakpoint jump
Computer, tablet, mobile only: only show the elements on specific devices.
Fluid: make the elements take all the possible space horizontally
Unstackable: never stack the elements even on small screens

What changes

Note that we have set the container's width to 970px and max-width to none on this page, so on small screens or narrower browser viewport, some contents will be compressed together and not be visible.

Regarding navbars

Navbars or menus in Semantic-UI are also non stackable by default, if you want, you can set a "ui stackable menu", which will become vertically stacked on small screens. As for collapsing navbar, you can use "computer only", "tablet only" or "mobile only" to control the actions on differnt screens, here is an example: reponsive navbar fixed at top.

Browsers, scrolling, and fixed elements

Non-responsive layouts highlight a key drawback to fixed elements. Any fixed component, such as a fixed navbar, will not be scrollable when the viewport becomes narrower than the page content. In other words, given the non-responsive container width of 970px and a viewport of 800px, you'll potentially hide 170px of content.

There is no way around this as it's default browser behavior. The only solution is a responsive layout or using a non-fixed element.

Non-responsive grid system

One third

One third

One third