# Widen a page to fill left and right

**URL:** <https://talk.jekyllrb.com/t/widen-a-page-to-fill-left-and-right/4309>\
**Category:** Help\
**Created:** [April 28, 2020, 5:02am UTC](https://talk.jekyllrb.com/t/widen-a-page-to-fill-left-and-right/4309 "2020-04-28T05:02:54Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![prof-amer](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/prof-amer/32/2482_2.png) [@prof-amer](https://talk.jekyllrb.com/u/prof-amer)\
**Post date:** [April 28, 2020, 5:02am UTC](https://talk.jekyllrb.com/t/widen-a-page-to-fill-left-and-right/4309/1 "2020-04-28T05:02:54Z")

</div>

Hi,

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;

 ![Screenshot_2020-04-28 Police Activity - Wrangling](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/b/b5df18b03242ff8ae3fb13f975dd64b3b162199e.png)

I want it to become like this;

 ![Screenshot_2020-04-28 Wide Single Layout Page(1)](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/8/8e8f2eec0924bc8593ce4a847619b5fd53f56875.png)

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [April 28, 2020, 2:23pm UTC](https://talk.jekyllrb.com/t/widen-a-page-to-fill-left-and-right/4309/2 "2020-04-28T14:23:49Z")

</div>

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%.

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [April 28, 2020, 2:25pm UTC](https://talk.jekyllrb.com/t/widen-a-page-to-fill-left-and-right/4309/3 "2020-04-28T14:25:07Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![prof-amer](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/prof-amer/32/2482_2.png) [@prof-amer](https://talk.jekyllrb.com/u/prof-amer)\
**Post date:** [May 1, 2020, 11:13am UTC](https://talk.jekyllrb.com/t/widen-a-page-to-fill-left-and-right/4309/4 "2020-05-01T11:13:43Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [May 1, 2020, 12:51pm UTC](https://talk.jekyllrb.com/t/widen-a-page-to-fill-left-and-right/4309/5 "2020-05-01T12:51:27Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mmistakes](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/mmistakes/32/2169_2.png) [@mmistakes](https://talk.jekyllrb.com/u/mmistakes)\
**Post date:** [May 1, 2020, 1:05pm UTC](https://talk.jekyllrb.com/t/widen-a-page-to-fill-left-and-right/4309/6 "2020-05-01T13:05:05Z")

</div>

This is documented here: [https://mmistakes.github.io/minimal-mistakes/docs/layouts/#wide-page](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.

---

<div class="post-metadata">

**Author:** ![prof-amer](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/prof-amer/32/2482_2.png) [@prof-amer](https://talk.jekyllrb.com/u/prof-amer)\
**Post date:** [May 1, 2020, 2:28pm UTC](https://talk.jekyllrb.com/t/widen-a-page-to-fill-left-and-right/4309/7 "2020-05-01T14:28:16Z")

</div>

Absolutely! Here it is; [https://prof-amer.github.io/wrangling/Police\_Activity\_Wrangling/](https://prof-amer.github.io/wrangling/Police_Activity_Wrangling/)

Really appreciate the help

---

<div class="post-metadata">

**Author:** ![prof-amer](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/prof-amer/32/2482_2.png) [@prof-amer](https://talk.jekyllrb.com/u/prof-amer)\
**Post date:** [May 1, 2020, 2:35pm UTC](https://talk.jekyllrb.com/t/widen-a-page-to-fill-left-and-right/4309/8 "2020-05-01T14:35:24Z")

</div>

I did, but nothing happened.

 ![Screenshot_2020-05-01 prof-amer prof-amer github io(1)](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/7/73db0714c3b612e4a587afe002741c8032e24124.png) ![Screenshot_2020-05-01 prof-amer prof-amer github io](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/e/e61be1bea344fd05c8cc84fa3ad7123edc7b6db1.png)

---

<div class="post-metadata">

**Author:** ![mmistakes](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/mmistakes/32/2169_2.png) [@mmistakes](https://talk.jekyllrb.com/u/mmistakes)\
**Post date:** [May 1, 2020, 3:15pm UTC](https://talk.jekyllrb.com/t/widen-a-page-to-fill-left-and-right/4309/9 "2020-05-01T15:15:16Z")

</div>

[Update the theme](https://mmistakes.github.io/minimal-mistakes/docs/upgrading/). 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.

```auto
<!--
  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
  https://github.com/mmistakes/minimal-mistakes/blob/master/LICENSE.txt
-->

```

---

<div class="post-metadata">

**Author:** ![prof-amer](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/prof-amer/32/2482_2.png) [@prof-amer](https://talk.jekyllrb.com/u/prof-amer)\
**Post date:** [May 2, 2020, 12:25am UTC](https://talk.jekyllrb.com/t/widen-a-page-to-fill-left-and-right/4309/10 "2020-05-02T00:25:09Z")

</div>

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

Thank you again!
