Reducing the width of category Column

Support
1

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

image
image.png1344×556 56.7 KB

Thanks in advance

2

This CSS should get you started

.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

7 Likes
3

The above goes to CSS?

1 Like
4

Yes sorry, should have noted that it’s CSS.

1 Like
5

Much appreciated, worked like charm.

6

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.

7

ah, there’s also a minimum width set… so you can override that and then if you decrease the 25% it should be narrower.

.categories-and-latest {
 flex-flow: row;
  div.column {
    min-width: unset;
    flex: 1 1 75%;
    &.categories {
      flex: 0 1 15%;
    } 
  }
}
3 Likes