Column width - rich text and report

So I know I’m missing the total obvious here, but i have spent 10+ hours trying to solve this…

I have a home page with a rich text view on left and pivot table report on right showing some summaries.

i cannot find any way to widen the left column to say 2/3rds and the right column to 1/3 widths or a way of forcing the pivot table to natural widths rather than stretched / full justified.

i have also tried all sorts of CSS tricks from the forums and other sites to no avail either. you can see page here - Knack (site is under construction)

i know the answer is probably staring me in the face but I’m throwing the towel in and asking in here!

whilst I’m here anyone know the CSS for changing colour of the hamburger mobile menu icon? it’s default white and is lost on grey header. I’ve not tried too hard on this so I’m sure it’s easier than above lol

thanks in advance!

Hi Andrew,

This should work:

/* Replace with your scene number */
#kn-scene_X .view-group-1 .view-column-group-1 { 
  flex: 2; 
}

Explanation:
The HTML for Knack pages (at the time of this writing) has the following structure:

view-group-1  
  view-column-group-1
  view-column-group-1
  ...

view-group-2
  view-column-group-2
  view-column-group-2
  ...

In your case, we are targeting view-column-group-1 inside of view-group-1. Your page currently has only one view-column-group-1 so we were able to select it using the following syntax: .view-group-1 .view-column-group-1

However, in other cases where you have multiple view-column-group-1 inside of view-group-1, then you can select the first instance of view-column-group-1 using the syntax nth-of-type. For example:

/* Replace with your scene number */
#kn-scene_X .view-group-1 .view-column-group-1:nth-of-type(1)

Hi KPs

Thanks so much for the reply, I had come across your code - as you can prob tell from other tweaks, thanks, but this bit did not work… so I have literally copied your code and changed to scene _1 and nothing. If you look at the page - Knack , you will see nothing has changed in formatting, and you can all see the code in the CSS…

i have also tried changing max-width in case it was that, but nothing etc.

i can see in code view the scene number is correct and view-group etc are all there.

strange?

Ah I see. Your page has multiple view-column-group-1 inside of view-group-1 , so we need to select only the first instance of view-column-group-1 using the syntax nth-of-type. For example:

#kn-scene_1 .view-group-1 .view-column-group-1:nth-of-type(1) {
  flex: 2;
}

Hope that helps.

3 Likes

Ahh that’s it! - thanks so much!

1 Like