5

I'm using sematic-ui and am trying to use a ui container element to contain my other elements. When i compile the code my ui container gets a width of 1215 and not 1280. If i read the sematic ui container documentation at http://semantic-ui.com/elements/container.html it says above 1200 as large monitor breakpoint. If i check there calculations width gutters and scrollbar they are saying the default width should be 1127px for the ui container yet mine is 1215(and i didn't override it or anything).

I'm confused i guess as to wether to override the queries to every breakpoint or should i make my design fit to 1215 for the largest size?

On another note how come the variables has a breakpoint for widescreen but its not even documented?

My ultimate goal is to get the ui container to be a width of 1280 since that is what my design is at and then obviously using the breakpoints it would be responsive. I'm afraid to override their media queries as im sure its calculated for a specific reason.

Default media queries set by semantic ui in site.variables:

@mobileBreakpoint            : 320px;
@tabletBreakpoint            : 768px;
@computerBreakpoint          : 992px;
@largeMonitorBreakpoint      : 1280px;
@widescreenMonitorBreakpoint : 1920px;

outputted css for the ui container in my css:

@media only screen and (min-width: 1280px)
.ui.container {
    width: 1215px;
    margin-left: auto!important;
    margin-right: auto!important;
}
cibit
  • 65
  • 2
  • 7
  • Since Semantic UI is rapidly getting new features and is often updated, the documentation is often slightly outdated (there was recently a question about [responsive visibility](http://stackoverflow.com/questions/32172155/which-one-is-the-right-one-semantic-ui-responsive-visibility/32203074#32203074) where I stated some undocumented visibility classes). I'm not actually sure what you're asking, e.g. you've discovered an issue with the documentation, but I don't understand what problem exactly this is causing to you? – fstanis Aug 27 '15 at 08:30
  • 1. If i insert a ui container element as the only element on the page why does it immediately set it to 1215? 2. documentation calculates the code of 1200 but the media query variable is set to 1280. Should it be set to 1200 if this is how they are doing the calculation? 3. They say with this calculation i should get a container of 1127px but im getting 1215 why? 4. if i take the media query of 1280px and do their calculations i get 1207 and not even 1215 why? 5. If my design is based off a 1280px layout whats the best way to work around this so that everything matches up to my design? – cibit Aug 27 '15 at 16:28

0 Answers0