# 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:** 8
**Page:** 1
### Author:  [@Jay91](https://meta.discourse.org/u/Jay91)
#### Post date: [April 1, 2019, 6:07pm UTC](https://meta.discourse.org/t/reducing-the-width-of-category-column/113155/1 "2019-04-01T18:07:38Z")
Hello,
As as you can see in the picture blow we use latest posts and categories view on our home page, what i need to know here is the best way to reduce the width of the categories column and make posts column wider to the right
Thanks in advance
---
### Author:  [@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")
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)
---
### Author:  [@Jay91](https://meta.discourse.org/u/Jay91)
#### Post date: [April 1, 2019, 6:35pm UTC](https://meta.discourse.org/t/reducing-the-width-of-category-column/113155/3 "2019-04-01T18:35:32Z")
> [@awesomerobot](#):
>
> This should get you started
>
> ```plaintext
> .categories-and-latest {
> flex-flow: row;
> div.column {
> flex: 1 1 75%;
> &.categories {
> flex: 0 1 25%;
> }
> }
> }
>
> ```
The above goes to CSS?
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [April 1, 2019, 6:36pm UTC](https://meta.discourse.org/t/reducing-the-width-of-category-column/113155/4 "2019-04-01T18:36:20Z")
Yes sorry, should have noted that it’s CSS.
---
### Author:  [@Jay91](https://meta.discourse.org/u/Jay91)
#### Post date: [April 1, 2019, 6:37pm UTC](https://meta.discourse.org/t/reducing-the-width-of-category-column/113155/5 "2019-04-01T18:37:13Z")
Much appreciated, worked like charm.
---
### Author:  [@Jay91](https://meta.discourse.org/u/Jay91)
#### Post date: [April 1, 2019, 6:50pm UTC](https://meta.discourse.org/t/reducing-the-width-of-category-column/113155/6 "2019-04-01T18:50:53Z")
the 25% is not enough, how i can go further ? i mean the 25% is the maximum i can shrink the column, i need to shrink it more.
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [April 1, 2019, 6:55pm UTC](https://meta.discourse.org/t/reducing-the-width-of-category-column/113155/7 "2019-04-01T18:55:07Z")
ah, there’s also a minimum width set… so you can override that and then if you decrease the 25% it should be narrower.
```scss
.categories-and-latest {
flex-flow: row;
div.column {
min-width: unset;
flex: 1 1 75%;
&.categories {
flex: 0 1 15%;
}
}
}
```
---
### Author:  [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [June 5, 2022, 5:25am UTC](https://meta.discourse.org/t/reducing-the-width-of-category-column/113155/10 "2022-06-05T05:25:47Z")