The effect of varying the width of Browser Window

[healiseu]

• This is a question about using the theme.
• I have updated all gems with bundle update.
• I have tested locally with bundle exec jekyll build.
• I have not modified assets in such a way that will affect the width of any element

---

Environment Information

• Minimal Mistakes version: 3.2.10
• github-pages or jekyll gem version: 3.1.6
• Operating system: Ubuntu

---

Hi Michael,
I have studied a bit a similar issue that was posted almost two years ago and then discussed again recently. In one of your comments there you mentioned that "you are working on a complete rewrite of the theme which should make customizing things a bit easier". This is version 3.2.10 of the theme, therefore I decided to open a new issue and ask a similar question.

This is a 1275x684 image captured from my Browser. My desktop background can be seen at the vertical edges of the image. You can measure the left and right margin of the images grid using a screen ruler and find that it is 2x120pixels = 240pixels. The total length of the browser window is about 1240pixes wide and therefore subtracting the margins we are left with a content area width of about 1000pixels.

My question is what are the theme files I should modify and where exactly to increase the content area width, i.e. decrease the left and right margin of the browser window ?

To make things a bit more interesting, let us put in the game the sidebar.

The width of the image captured from my Browser is the same and the width of the browser window has not been modified. If we measure again the right margin from the edge of the browser window, we find that it is 300 pixels ! I am not sure what is the width of the sidebar, it will be nice to help me put a background color, but If I measure from the point the social media images start I get 120pixels. This is the same margin I had without the side bar.

This indicates that somehow when you add the sidebar, the width of the content area is shrinked because the right margin has been increased ! How is it possible to fix the right margin, e.g. 120 pixels in this example ?

You may also consider that If you experiment with even larger sizes of a browser window, e.g. 1900px then you get a right margin of about 520px wide and a left margin of about 300px !

Thanks in advance for any effort to solve that problem and to answer my question.

PS: I think you will greatly assist your users if you can write some documentation on how you applied Susy responsive framework, especially how do you modify width of content area and sidebar and how is that affected by changing the width of the browser window ?

[mmistakes]

To start I'd suggest you fire up the web developer tools in whatever browser you're using. This will allow you to inspect any element on the page to get a class name and CSS declarations.

Once you do that it's a lot easier to see what's going on. Essentially the content is wrapped in a div #main that is centered on the page and has a max width of 1024 - 1280px depending on your screen size.

Inside of that is the .sidebar and .page containers. Each of those have various widths so they can adapt at various screen sizes. You'll want to play with those values.

.page has some padding on the right to keep it from spilling out completely and accomodate the optional table of contents list that can be added to posts/pages.

The CSS for these are mostly in assets/_scss/_page.scss. You'll see I'm using Susy mixins the determine the width of these elements. There are also some prefix and suffix mixins from Susy used to add space before and after.

.page {
  @include breakpoint($large) {
    @include span(10 of 12 last);
    @include prefix(0.5 of 12);
    @include suffix(2 of 12);
  }

  .page__inner-wrap {
    @include full();

    .page__content,
    .page__meta,
    .page__share {
      @include full();
    }
  }
}

Any of these values can be changed you'll just have to make sure they add up to 12 or else things will break and not line-up. Susy is really powerful so I'd suggest you read their docs to fully understand what's going on and how to use the mixins.

Also I'll add one more tidbit. The Susy mixins span, prefix, suffix, etc. are set to be fluid. Meaning you'll get percentage based widths instead of static px values. In .page SCSS code above you'll get CSS like this after it's been preprocessed.

.page {
    width: 83.05085%;
    float: right;
    margin-right: 0;
    padding-left: 4.23729%;
    padding-right: 16.94915%;
}

If you're finding it hard to align things with percentages you can change math: fluid to math: static in assets/_scss/_variables.scss under Grid. There's also some debugging options you can enable to overlay everything with a blue grid to see what's going on.

$susy: (
  columns: 12,
  // column-width: 90px,
  gutters: 1/4,
  math: fluid,
  output: float,
  gutter-position: after,
  container: $large,
  global-box-sizing: border-box,
  // debug: (
  //   image: show,
  //   color: blue,
  //   output: overlay,
  //   toggle: top right,
  // ),
);

[healiseu]

Good morning Michael,
I am aware of the css box model but I have not played with sass and the sussy responsive framework. Before diving into the details of scss files, let me recapitulate the problem I have with the single page layout of your theme.

If you examine the metrics pane on this captured image you will see that the padding-right of article.page element is 167px but the padding-left is only 42px. If you compare this with article-splash element on your splash layout there is no padding at all defined. I cannot understand the logic behind this large padding-right. As a result of this, there is hardly any resize of section.page__content in a large screen.

Therefore If I am right MY problem is how to disable or reduce that padding-right margin, right ? How is that related with the columns of sussy framework ? Do I have to make changes in more that one files, e.g. _page.scss to fix that ?

You also mentioned that div #main has a max width of 1024 - 1280px. In fact this is the point I started experimenting with the breakpoints section of _variables.scss file.

$small : 768px;
$medium : 900px;
$medium-wide : 1024px;
$large : 1280px;
$x-large : 1900px;

In my opinion these changes improved the appearance, especially on large screens.

[mmistakes]

Here's the logic.

.page has padding applied to the right while .splash and .archive do not.

This is done to "visually center" it so things look more pleasing if the sidebar is disabled. It also helps reduce the line-length of the text which is good for readability. Long lines of text are harder to read as the eye can have problems tracking position. It is a good rule of thumb to limit characters to around 60-70 for a better experience.

The how. .page has 3 Susy mixins applied. span dictates it's width. prefix the padding before it (small green box on it's left) and suffix the padding after (the larger green box on the right).

@ include breakpoint is a mixin for helping with media queries to handle responsive design of various components.

.page {
@include breakpoint($large) {
@include span(10 of 12 last);
@include prefix(0.5 of 12);
@include suffix(2 of 12);
}

You can change any of those values to get the widths you want. The keyword last on @include span(10 of 12 last); removes the margin on the right so things don't overflow.

If you read through Susy's documentation it will all make much more sense. There really is no magic to Susy. It's just a bunch of math, which is easier to write than trying to figure out a bunch of percentages that add up to 100%.

[healiseu]

Super, your explanation make things far more clear regarding to the way you applied Sussy magic to your theme ;-)

Indeed, in order to increase or decrease the padding-right (larger green box on the right) you may vary the @include suffix (2 of 12);

In your previous comment you also mentioned that:

Any of these values can be changed you'll just have to make sure they add up to 12 or else things will break and not line-up.

Could you please also clarify what are the elements and their corresponding column values that they add up to 12, the size of div #main, for the two layouts you included, i.e. single and splash ? That will be great.

[mmistakes]

Sure.

#main holds all of the main content (sidebar, center column, etc.). This uses Susy's container mixin which essentially gives it a max-width to keep it controlled. This value is set in assets/_variables.scss with this line:

container: $large

$large is a SCSS variable that maps to 1280px. So after compiling #main will have a declaration of max-width: 1280px;. Meaning it will never be larger than 1280px.

It also has a 12 column grid applied to it. If you turned on the debugger in Susy you'd see 12 blue columns across that container. These are the 12 that I use to align and size the .sidebar and .page.

If I simplify the CSS you essentially have this: a 2 column sidebar and a 10 column page declared with the @include span(x of x) mixin. 2 + 10 = 12

.sidebar {
  @include span(2 of 12);
}

.page {
  @include span(10 of 12 last);
}

The prefix and suffix stuff applies padding which you can view as "internal" spacing that doesn't count towards the 12 column stuff.

If for example you wanted to make the sidebar even thinner you could do:

.sidebar {
  @include span(1 of 12);
}

.page {
  @include span(11 of 12 last);
}

Being mindful to add up to 12 so the math works out. 1 + 11 = 12.

[mmistakes]

Closing as I believe I've addressed and answered the question. If that's not the case feel free to re-open the issue.

[amosshi]

See #2093