Widen a page to fill left and right


I’m trying to widen a page so that it fills to the left and right. I already tried using the classes = wide YAML but it didn’t work. The page that I am trying is part of a collection if that helps. I also tried including layout: single YAML into the page but still didn’t work. Below is the screenshot;

I want it to become like this;

I think it looks fine like that at least on a horizontal device. Full width makes sense for a vertical mobile screen

I don’t know about setting classes in YAML. You can use a layout: single provided you have a layout named single.html in your repo or theme.

I can also suggest editing the CSS of the markdown page, or page layout or default layout (depending how widely you need this applied). You can even edit and preview this in the browser with dev tools open and without editing your repo.
You could find the CSS identify for the element which you want to stretch. I am guessing it has width or max width CSS attribute, so you can overwrite that to be 100%.

If you inspect the site you want to copy, either in the browser or the repo, you can copy the CSS attribute and apply to your element.

I have been playing around with the CSS, but found that the max width is already set to 100%. I might be poking around on the wrong file but I’m not sure. I’m not really sure why the page still doesn’t seems wide. As you can see from the example screenshot of minimal mistakes website, the content are clearly widened. I really wanted to achieve that.

Can you share your site? Looking at rendered site for HTML and CSS would help a lot.

This is documented here: https://mmistakes.github.io/minimal-mistakes/docs/layouts/#wide-page

You need to add classes: wide to the page(s) YAML front matter you want to widen.

Absolutely! Here it is; https://prof-amer.github.io/wrangling/Police_Activity_Wrangling/

Really appreciate the help

I did, but nothing happened.

Update the theme. You’re several years/versions behind. Latest is 4.19.1… you’re at 4.9.0 which doesn’t have support for all the new stuff like wide layouts.

  Minimal Mistakes Jekyll Theme 4.9.0 by Michael Rose
  Copyright 2013-2018 Michael Rose - mademistakes.com | @mmistakes
  Free for personal and commercial use under the MIT license
1 Like

Thank you so much! I have been building the website for almost a month without realizing it was wayyyyyy outdated!

Thank you again!