Correct .page width and padding to visually center

[justinrummel]

• This is a question about using the theme.
• This is a feature request.
• I have updated all gems with bundle update.
• I have tested locally with bundle exec jekyll build.
• I believe this to be a bug with the theme --- not Jekyll, GitHub Pages or one of the bundled plugins.

---

Environment informations

• **Minimal Mistakes version: 4.5
• **github-pages or jekyll gem version: jekyll 3.5.1
• **Operating system: macOS Sierra 10.12.6

---

Expected behavior

Page width seems to have changed since 4.5 gem is released

Steps to reproduce the behavior

When viewing on a desktop machine you can see the class .page is set for:

width: 83.05085%;
float: right;
margin-right: 0;
padding-left: 4.23729%;
padding-right: 16.94915%;

screenshot: http://cl.rummel.co/3g0P222s1m3m

w/ gem 4.5 running locally, I see things have changed due to Susy

float: right;
width: 83.0508474576%;
padding-left: 1.6949152542%;
padding-right: 1.6949152542%

screenshot: http://cl.rummel.co/2t3L1H0o3j2j

It seems like padding-left needs a multiplier of 2.5 and padding-right needs a multiplier of 10, unless the MM is changing the presentation intentionally. If so, is there a way to go back to the previous formatting but still using the current version of Susy?

[mmistakes]

No way to go back. Susy 3 killed a lot of the mixins I used with the theme and just provides simplified functions. I'll have to see if I can match the math in places it changed.

As long as the layout didn't break I'm cool with some differences.

[dev4223]

I've added a right margin to page class:

.page {

  @include breakpoint($large) {
    float: right;
    width: span(8 of 12);
    margin-right: span(2 of 12);
    padding-left: gutter(0.5 of 12);
    padding-right: gutter(2 of 12);
  }

So it looks the same as before.

Maybe it helps.

[mmistakes]

@dev4223 That's close, but the math is still off.

@justinrummel The original intention with was to have the main content appear centered on the page, with equal amounts of white space on the left and right. In the old version with Susy 2, the math wasn't exactly there, but it looked close visually.

I'm going to take another stab at it to try and balance things out since Susy 3 simplified some things. Might be easier to get the math exact.

[mmistakes]

Pushed some improvements to get the page and archive layouts where I've always wanted them.

• Center main content block
• Fix "table of contents" sidebar overlap and improvement alignment so it fits in the white-space to the right of the main content. Similar to how the author side bar fits to the left.

I haven't merged it into master yet but if you want to give it a spin it's in the layout-adjustments branch and can be used by adding this line to your Gemfile

gem "minimal-mistakes-jekyll", :git => "https://github.com/mmistakes/minimal-mistakes.git", :branch => "layout-adjustments"

[justinrummel]

Awesome! I'll try it out this morning

[justinrummel]

Wanted to make sure I'm reading this correctly, you want the Table of Contents to be on the right hand side vs. being embedded with the text.

I have an updated screenshot of my current site showing the difference:

• TOC Embedded with text: http://cl.rummel.co/0B2r2D290p42
• TOC on the right: http://cl.rummel.co/2F0G1r3t2k0f

If this is the case, it would be nice if TOC could be identified towards the bottom of the markdown, but aligned at the top right. Else, if you but the TOC on the first line you will see the title of the TOC on the main page when post.excerpt is used. ( example: http://cl.rummel.co/0W040k3s0b31 )

[mmistakes]

That's right. I wanted to push the TOC out of the main content block since it doesn't always flow well. For instance with code blocks it cuts part of them off. Moving it to the dead space on the right avoids all that.

I pushed a fix that if you place the {% include toc %} further down the page, it will be positioned at the top and align with the main content.

I tend to drop the TOC include in after the first paragraph to avoid being pulled into the auto-generated post.excerpt. Placing it at the end of your Markdown file isn't ideal when the page is viewed on mobile when the content collapses down to a single column.

The TOC will be after the content, which defeats the purpose of it.

Let me know your thoughts and if this works out with your existing content.

[justinrummel]

Thanks for the fast turnaround!

• Desktop view looks GREAT!
• Mobile view will still inline the TOC where you have the liquid code snippet. Not a big deal from a reading perspective. I wouldn't drop the TOC to the bottom of the page just yet.
• iPad and iPad Pro views on Google Chrome suggest that the TOC is now on top of the text/images of the post making it unreadable.

[mmistakes]

Should be fixed now. I forgot to include a negative margin for the smaller screen sizes, so the TOC wasn't getting pushed to the right.

[justinrummel]

flawless! Going to push it to my main site and let it bake in production.

[mmistakes]

Nice. Thanks for testing!