How to customize container width in Semantic UI

Question

For example, tablet container size is determined by:

/* In container.variables */
@tabletWidth : @tabletBreakpoint - (@tabletMinimumGutter * 2) - @scrollbarWidth;

which is mentioned in Semantic Container document.

But I don't want my size of tablet container be so, I want it smaller, so to customize the container size, which file should I modify and how to modify ?

Answer 1

The line in question is (at time of writing) inside container.variables. I would urge you, however, to modify (increase) @tabletMinimumGutter instead of changing the width directly.

That said, this will require you to rebuild Semantic UI, which I believe may not the worth it if the only thing you want to change is the width on a tablet. I would instead just add some additional CSS to your page, like this, which will override the width set by Semantic UI (in this example, the container width I want is 723px, but you can use anything):

<link rel="stylesheet" type="text/css" href="semantic.css">
<style>
/* You probably want this in a separate CSS file */

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .ui.container {
    width: 723px;
  }

  .ui.grid.container {
    width: calc( 723px  +  2rem ) !important;
  }

  .ui.relaxed.grid.container {
    width: calc( 723px  +  3rem ) !important;
  }

  .ui.very.relaxed.grid.container {
    width: calc( 723px  +  5rem ) !important;
  }
}
</style>