# Reducing the width of category Column

**URL:** <https://meta.discourse.org/t/reducing-the-width-of-category-column/113155>\
**Category:** Support\
**Created:** [April 1, 2019, 6:07pm UTC](https://meta.discourse.org/t/reducing-the-width-of-category-column/113155 "2019-04-01T18:07:38Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [April 1, 2019, 6:28pm UTC](https://meta.discourse.org/t/reducing-the-width-of-category-column/113155/2 "2019-04-01T18:28:18Z")

</div>

This CSS should get you started

```scss
.categories-and-latest {
 flex-flow: row;
  div.column {
    flex: 1 1 75%;
    &.categories {
      flex: 0 1 25%;
    } 
  }
}

```

Adjust the 25% until the categories column is your desired width. The other column will fill the remaining space.

* * *

To explain how the flex layout works a bit more… the shorthand is:

`flex: grow shrink basis;`

`grow`: a non-zero value allows the div to grow to fill the space available, 0 will prevent this behavior

`shrink`: a non-zero value allows the div to shrink to fill the space available, 0 will prevent this behavior

`basis`: essentially it’s the width (or height) the div starts off at before growing/shrinking

[More in-depth explanations from MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex)

---

_[View the full topic](https://meta.discourse.org/t/reducing-the-width-of-category-column/113155)._