How does scaling work?

[yankiara]

Hi all!

I can’t get the builder scaling working…

For instance, I would like to lock the site width to 1920px, so that whenever I open/close side panels or reduce browser width, the canvas zooms in/out to always render the page at 1920px wide.

But when I start typing in the scaling width input, this is totally erratic and I can’t get the right number. For instance, when I type “1”, it is replaced by “0”, and the following is not better.

The scale input seems to work, though, but of course it does not allow to lock a fixed width.

Is there something I’m missing here?

[Louis]

Hi @yankiara,

Good point. I usually use the scrubber on either width or percentage, but when inputting the calculation should only be done on Enter.

Will try to apply that on the next update.

[jornes]

Just to add a comment.
The scaling was supposed to scale the canvas automatically as soon as we opened any panels on the side.

And have an option for enabling the auto-scaling or disabling it.

[Louis]

@jornes

The scaling was supposed to scale the canvas automatically as soon as we opened any panels on the side.

I might be misunderstanding, but let’s say it is set at 80% scale, it will automatically resize when closing/opening the panels to the specified %.

[yankiara]

Just tested it and it doesn’t seem to work, or I don’t know how to use it.

When I open library panel, site width changes.

The canvas should just be zoomed out so that the site is still displayed with same (virtual) width.
Because currently it is just like changing breakpoint or reducing windows/canvas size, which is not the desired effect. Well at least for me, sorry if I don’t get it

If you have a look at Oxygen or Bricks, when you lock a specific width in pixels, whatever the panels opened/closed, canvas always displays the site with the specified width, so that the layout doesn’t change with panels, unlike breakpoints, which change the layout.

For me the purpose of width lock is to not alter the layout with side panels.

[Louis]

@yankiara

By the way, width changes but not percentage, I don’t actually understand what is this percentage.

Exactly… Percentage of the viewport width is the deciding factor in scaling.

[yankiara]

Sorry, just edited my post to remove this

[yankiara]

My bad, so if I understand well, it is not a width lock but just scaling, as the button label says

So a lock feature would be nice, like I set a fixed pixel width, and the canvas is adjusted accordingly and always displays the same virtual pixel width and layout doesn’t shift.

What do you think?

[Louis]

Sounds like a great addition, will make sure we add that!

Thanks @yankiara.

[bmc38119]

This is awesome news. I have been struggling with this as well. This will make working with the canvas much better on laptop size screens! And not having to set that resize setting each time editing a page.

[yankiara]

Hi @Louis,

Any update on this?

Width input is still unusable and pixel lock or body width auto scale would be welcome

[yankiara]

BUMP and changed to BUG, scaling is still unusable.

So on a full HD laptop with open panels, canvas show a mobile view although we’re editing desktop breakpoint…
The only way to see the right desktop view is to unzoom with the browser, which is a bit tedious, since it also unzooms all other tabs from the same website.

Please can you have a look at this?

[Louis]

Hello @yankiara,

Persistent width lock has been added to 1.2.9.9.3 with a few fixes.

I wasn’t able to replicate what you describe in your last post, and would be grateful for a small screencast if possible on your end.

In the meantime, I will mark this as fixed.
Please don’t hesitate to let me know if there is any trouble.

Cheers,

[yankiara]

Hi @Louis,

Thanks this improvement!

It seems the input is OK now when width is locked, but when it is not, I still have the issue while inputing a number. For instance, 1800 is converted to 1689.
Something is still interfering.

Besides, and this is way more important, it looks like scaling doesn’t handle breakpoints:

Here, at 600px width, middle breakpoint should be activated and mobile menu should appear instead of the desktop one.

I guess a SCALE operation is not enough here, but I don’t know how it is handled in other page editors.

IMHO, the viewport needs to be scaled to match canvas width, but the real width (the one specified in scale input) has to be respected to launch the right CSS breakpoint.

Lastly, I have another issue with this implementation: body element is not centered in canvas, regardless of the width:

And you can see in the first screenshot, with the mobile view, that the body even OVERFLOWS the canvas.

It is due to the fact I always set a max-width and auto margins to my body tag to prevent ridiculous background extensions to the edges of the window on big screens or when zooming out a lot.

So, instead of scaling body, would it be possible to scale html element?
This would solve the issue:

(Though sometimes I’m not sure whether it is good practice or not to directly alter the body like this and not use an intermediary wrapper, leading to obviously potential conflicts like this one…)