CSS to modify page column width

Ask the Community Get Answers
1

Does anybody have a CSS that I can use to change the width of page columns? Right now I have a form view and a table view that are placed side-by-side. The views are split 50/50 on the page. I need to change this to a 75/25 split. Does anyone have any experience with this?

1 Like
2

Hi Peter,

The CSS varies, but I would write:

/* Adjusts the width of columns on a page */
/* Note: You need to update the keys for scene, view-group, and view-column-group (see below). */
@media screen and (min-width: 980px) {
  /* left column */
  #kn-scene_7 div.view-group-2 div.view-column-group-2:nth-of-type(1) {
    flex: 2;
  }
  /* right column */
  #kn-scene_7 div.view-group-2 div.view-column-group-2:nth-of-type(2) {
    flex: 1;
  }
}
3

Thank you, works great!

4

Thanks @KnackPros, I needed this one today!
My result below, with the CSS I used for dual-columns specifically.

image
image937×1055 74.3 KB

div.kn-details-group.column-2 div.kn-details-group-column:nth-of-type(1)
{
  flex-basis: 15% !important;
  min-width: 150px !important;
}

div.kn-details-group.column-2 div.kn-details-group-column:nth-of-type(2)
{
  flex-basis: 85% !important;
}
1 Like