[Support request] Adjust margins on Off Canvas Panel

[Michelle]

I designed buttons in Elements to have no right and left margins for the Off Canvas Panel. (I want them to stretch across the entire Off Canvas window.)
There is a wide gap on the right where the button backgrounds cut off. Here is a screenshot:

View post on imgur.com

I’m posting again with an update in case it helps anyone else encountering this issue:
I adjusted the right button padding to 600px, the left to 0 on all sizes. Not quite there, but the right margin is now ok. The left is giving me trouble because when I adjust the padding, it moves the background but not the button title.

[Ying]

Hi Michaelle,

Try toggle the Fill Horizontal Space option when the Buttons block is selected.

[Michelle]

Thank you. Sadly, I did that and there is still a left white margin. Also, when Fill Horizontal Space is enabled, the button text and icons are no longer aligned flush left.

[Michelle]

Update again: I used Fill Horizontal Space for tablet and mobile only. It still has a white gap on the left, but button title alignment is improving…

[Ying]

1. Remove the paddings like 200px for the button.

2. Drag the buttons block out to the root, you don’t need to add them inside any container block.

3. Then add this CSS:

#generate-slideout-menu.slideout-navigation.offside .inside-navigation {
    display: block;
}

4. Select the Buttons block, add -14px as left and right margin to offset the paddings of the slide out navigation.

[Michelle]

Thank you for this! It looks much better.

And — I didn’t know I could use negative numbers. Good to learn. 🙂

[Ying]

I didn’t know I could use negative numbers

Only for margins, can not use negative values for paddings 🙂

[Author]

Posts