GK-data columns - change individual column width

Hiya,

is there a way I can affect the first of two columns to be smaller in width and then scale properly when being responsive for mobile usage? I imagine I have to assign percentages for individual ones, at the moment both are 50% of the space being used.

Best,
Sigrid

Hi,

It's possible but please add adiditional class to your HTML to not affect other columns i.e.:

Code: Select all

<div class="gk-cols custom" ...

Now you can add css:

Code: Select all


.gk-cols.custom[data-cols="2"] > div {
  width: 40%;
}


Hiya,

so I guess, if I want to have two columns, one being 20% the other being 80% and there is 20 padding between them, I can not use the gk-columns to define individual width percentages?

Attached is a screenshot.

Hi,
If you want to have also padding, you should use less than 20 and 80%, could you provide URL to your page with these columns?

I think this approach wont work, as it affects both columns, when values are changed.

Hence my initial question, how the left column can be 20% of the whole page width and the right column can be 80% whereas there is say 15 % padding between them.

Try this code:

Code: Select all

.gk-cols.custom[data-cols="2"] > div:first-child {
  width: 20%;
}

.gk-cols.custom[data-cols="2"] > div:nth-child(2) {
  width: 65%;
}


etc.