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 ?
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>
