Change the width of the page columns

Help Center Get Answers
1

I am looking for help on how to adjust the width of the 2 views I have on a page side by side.
Currently, I have a table view on the left and a form view on the right. The form view doesn’t need to be very wide but the way the layouts work currently they each take up 1/2 the page width, I was hoping more for a 75/25 or 67/33 type of layout.
I have seen different layouts inside views, but not on the pages.

Any help is appreciated.

2

This isn’t possible with Knacks standard features. It may be possible with CSS but I’m not a coder :stuck_out_tongue_closed_eyes: You could use a blank rich text field and add that to reduce the width.

3

Hi Adrian,

You will find the option here:

image
image731×542 26.3 KB

4

Doh :roll_eyes: of course, I missed the point about the views being side by side. Only done that about 10,000 times. :man_shrugging:

5

Hi MichaelG,

I had seen that on the Details view, but that only works inside that view. What I was hoping for is where you can do that for the whole page.

Although it may not be possible becuase of the way the views stack themselves on a mobile or skinny view. Was just hoping there was something out there.

Thanks all for the responses.

6

Ah ok, I didn’t read well enough your original post. ups sorry.

@CarlHolmes answered you on this line.

In CSS you can easily add margins between views to apply in diferent screen sizes. But it does take some time to adjust them correctly because in desktop it might be margin-left, and smatphone margin-top.

Knack said they are now working with highest priority on the Live App design.

7

Did you figure this out?
The standard would not let me change the layout even with CSS code. I might be doing something wrong.

8

Hi Paul6,

No, I have just lived with the even split in pages. Certainly something that could go on the new Feature request area.

Certainly understand why the even split is there, because if you had uneven split how would that translate to mobile where views tend to stack.

9

Hi @Adrian_vD

You can make view widths responsive by adding this CSS

@media screen and (min-width: 768px) {
    #view_123 {
          max-width: 70%; 
     }
     #view_234 {
           max-width: 30%
      }
}

This means that if your viewport is above 768px (mobile) if you make your grid view 70% this will take up more of your screen if the width is bigger than mobile else it will revert to it normal state for mobile.

Craig

10

Hi @CSWinnall

Thanks for that code.

image
image1857×342 27.8 KB

It looks to only be applying the % to their respective 1/2’s of the page and not the whole page.
image
image1829×338 28 KB

But this is still a handy piece of code to help restrict views that don’t need to be as large as they default to.

11

Sorry try this

@media screen and (min-width: 768px) {
    .view-column:has(#view_123) {
          max-width: 70%; 
     }
     .view-column:has(#view_234) {
           max-width: 30%
      }
}
12

That worked perfectly!

Thank you.

1 Like