How can I make a layer responsive?

[AndreasMW]

I have created a web page that contains layers with text objects on them. The layers scroll up, when the respective menu item is selected. When the web page is accessed on a smartphone, however, the page itself is adjusted, as it seems, according to the breakpoints set, but the layers are not. They are much larger and project beyond the screen size, and the text on the layers cannot be read entirely. Turning the layers into "floating" has not helped so far.
I would like to ask, if the layers can also be adjusted according to certain breakpoints, that they fit into a smartphone sized screen, and how it is possible to achieve that?

[AndreasMW]

I had selected "floating" in the wrong menu first. Now I see that there can be made adjustments, when layers are turned into "floating". As it seems so far, this works even better so far, when the layers are turned into "docking layers".
Now the text on the layers can be read moving the text. I hope, that adjustments can be made in this way, that on a larger screen the scroll options don't appear, that are rather required on small screens.

[BaconFries]

Please read from the following:
Create a responsive website with anchored layers
https://www.wysiwygwebbuilder.com/anchored_layers.html
Create a responsive website with floating layers
https://www.wysiwygwebbuilder.com/floating_layers.html
Using Layers in WYSIWYG Web Builder
https://www.wysiwygwebbuilder.com/using_layers.html

[Pablo]

Layers are fixed/absolute containers, so they always have a fixed size.
But you can add breakpoints to adjust the layer to different screen sizes.

[AndreasMW]

Thank you very much, Pablo and BaconFries, for your answers!

I have tried many variation, but unfortunately I could not find out, how to break the layers or the content of the layers, while the layers stay centred
in the page.
This is the page: http://www.psychotherapie-seebe.de
The layers (hidden at start) scroll up, when the respective menu item is selected. These are "sticky layers". On smaller screens like on smartphones the content of the layers cannot be read anymore entirely.

When changing the layers into "docking layers", this seems to be the easiest solution, they stay centered and the content can be scrolled like in this demo upload:
http://leslumieres.de
Unfortunately there is the aesthetical downside, that the scroll slider also appears on larger screens.

When turning the layers into "floating layers", they become responsive, as it seems, but then I could not centre the layers anymore.

Editable breakpoints I just could see in "panal layers".

Is there any solution for adding breakpoints to the layers or their content or make them responsive, while getting the same appearance like with "sticky layers"?

[Pablo]

I cannot see what you have done based on the HTML code.
To be able to help you, I need a demo project so I can see all your settings.

Related FAQ:
https://www.wysiwygwebbuilder.com/forum ... 10&t=82134

Notre that you do not add breakpoints to the layer, but to the page.

Related tutorial:
http://www.wysiwygwebbuilder.com/rwd_basics.html

[AndreasMW]

Thank you very much for taking the time to look into my project!
You can find the download of the project here: https://www.jottacloud.com/s/0408d04e3b ... 14f8d69225

I have uploaded the whole project unchanged, because the structure is very simple. There is only one index page, where everything is placed on, except for one additional site that contains the impressum and the privacy policy.

As you have mention, breakpoints are applied to the whole page, as I understand it. This is, that I wonder, why the breakpoints don't affect the layers, that are placed on the index page, while other objects like the menu and text objects, for example, on the top of the page are affected by the breakpoints and react in a responsive way, when the screen size gets smaller.

The layers (about-layer, contact-layer etc.) are set to "invisible" in the object manager at the start. They are all placed underneath the grey docking layer which serves as the bottom of the web page.

[Pablo]

I do not see any breakpoints on your pages.
Please see this related tutorial for more information:
https://www.wysiwygwebbuilder.com/rwd_basics.html

Currently you have mixed layout grids and layers on the same.
- Layout grids are flexible, they resize automatically based on the screen size.
- Layer are fixed/absolute containers, they do not scale automatically. You will need to add breakpoints and rearrange the elements on the layer to optimize the layout for smaller screens.
Related tutorial:
https://wysiwygwebbuilder.com/layout_modes.html

Also, the CSS menu is too wide for smaller screens, so I suggest to use a responsive menu instead.

[AndreasMW]

Thank you very much, Pablo, for these references!

I have needed some time to get into this. Now I think, I understand the concepts behind the structures.
First I thought, that there is a default setting of breakpoints that apply to the webpage and its objects. So I wondered
why they don't apply to the layers. As I understand now, the upper part of the page is responsive, because the layout grid is
responsive and the objects on the upper part are suitable objects to be part of this responsiveness. I was confused, that the layers,
that can be a part of the grid, are not responsive, but as you mentioned, they cannot be part of this in the same way as certain other objects.

I hope, that I know now, how to rearrange the webpage for the different screen sizes.

Thank you once again!