How to minimize the space between sidebar and content

Anvil Q&A
1

On the Standard Page Form (with the sidebar), how can I shrink the amount of space between the side nav bar and the start of my Column Panel.

I notice that here is about 162px of margin and 24px of padding before the start of my content.

I’ve isolated it to this CSS that’s affecting this visual treatment but I’m not clear on what I have to change to minimize the gap.

/* Mobile and desktop margins for content */
.content > * > .anvil-container {
  padding: 8px;
}

@media(min-width:991px) {
  .content > * > .anvil-container {
    padding: 16px 24px;
  }
}

.content .anvil-measure-this {
  padding-bottom: 1px; /* Prevent margin collapse messing up embedding */
}

Thanks
SS

2

How about something like this as an example:

.anvil-role-move_left {
  position: absolute;
  left: 160px;   /* or try left: auto; */
  width: 100px;
  height: 120px;
  border: 3px solid blue;
}

sc

If this is not the space you want to reduce, please provide a picture for clarification.

I’m no CSS expert. I just Googled “css position left” and tried the first example.

See here to learn about creating your own roles.

3

Thanks @alcampopiano Will try this and see how it goes.

4

Are you potentially asking how to set a full_width_row i.e. get the content panel to fill the whole space on desktops?

From the docs if search full width row you get this:

What is full width row?

5

Hi @stucork

No, I don’t want it to span the full row. I noticed I can do that with a checkbox setting on the container.

I want to adjust it so that it is between full row width and the default width now. It would be nice to be able to adjust the width to what I need.

SS

6

I see - how wide do you want it?

You could adjust the media queries widths.

Here are the standard breakpoints https://www.w3schools.com/howto/howto_css_media_query_breakpoints.asp

anvil has set their break point to

@media(max-width:991px)/@media(min-width:992px)

If you change the media queries to be the next break point up

@media(max-width:1199px)/@media(min-width:1200px)

Then it should work for extra large devices rather than large devices

… maybe