Make collum width

[nikish]

hey pros,

i just made a table where i list a few brands, can be seen here - https://casinoorbit.com/casinon-utan-licens/

on thing that im not managing to do is, i have selected 5 columns in the element ROW like this
1/5 + 1/5 + 1/5 + 1/5 + 1/5 +

Now to my question, or actually 2 questions.

1 - how can i make the first collum not as wide as 1/5 (where I list positions 1-10) - would love to see like 1/3 instead. So the images go more to the left. As when i put 1,2 or 3 the collum does not have to be as wide as the rests

2 - question - how can i make the table responsive so its a table on phone as well, instead of the rows stacking on top of each other

Kind regards

[ruenel]

Hello Niklas,

Thanks for writing in!

1.) You want a 5 column layout where the 1st column is wider than the others. If that is the case, then you use:

1/3 + 1/6 + 1/6 + 1/6 + 1/6

2.) You are using responsive columns. It will collapse in smaller screens. Are you trying to make the columns display the same on smaller screens? I am not sure if it is a good design and that still fits in a smaller screen.

Kindly let us know how it goes.

[nikish]

@RueNel

1/3 + 1/6 + 1/6 + 1/6 + 1/6

hey hey and thank you for replying.
i would love to have the forst collum less wide. the other once. 1/5 are good width.
its just the first one that i would like to have smaller.

kind regards

[christopher]

Hi Niklas,

It is a tricky one as the 5 column is an odd number. The only way you can handle this is to have something like:

1/7+1/5+1/5+1/5+1/5

The last column will be bigger, but there is no way that you can have another way around due to the fact it is a 5 column one.

The columns will stack in the mobile view, but if you want to change the columns for other screen sizes you may need to use the hide during breakpoint feature to handle the case.

Thank you.

[nikish]

hey hey, does not seems to work
if i put 1/7+1/5+1/5+1/5+1/5, it remains the same as 1/5+1/5+1/5+1/5+1/5.
thanks for replying

[albrecht]

Hi Niklas,

Try adding an Element CSS to the column you want to adjust the width.

Add this css.

@media (min-width: 768px){
  $el.x-column.x-1-5{
    width: 10%;
  }
}

You can adjust the 10% value.

Hope it helps.

Thanks.