Non-responsive Template for 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

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.

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.

One third

Non-responsive Semantic-UI

What changes

Browsers, scrolling, and fixed elements

Non-responsive grid system