Realigning objects in Object Manager

[ptlycldy]

I have put together a page with a Page Header at the top, a second group consisting of a Flex container holding a carousel with images, a third group consisting of a flex container holding a card container with 2 cards. All worked okay, and in the object manager, both the containers and their contents were subordinate to the flex containers.

Then I added a Layout grid below this column, and it jumped up to be behind (hidden) the flexgrid with the card container. I have tried all sorts of things to move the layout grid to the bottom of the page, but it keeps going up between the card container flexgrid and the carousel flexgrid. Also, now, the two containers are not subordinate to the flexgrid (they are no longer indented) in the object manager.

So--two questions: 1) how can I move the containers back to be indented under the flex grids? Click and drag the container on top of the flex grid doesn't appear to work, nor does "move Forward" and "Move Back".

2) When placing a layout grid or a flex grid on a page below other grids --so that one can scroll down to the various sections of the page--how do you make them stay where you put them or what instructions do you give to the grid above to prevent the new grid from "getting out of turn?"

Thanks (Sorry-- this is sort of a beginner problem, but I've never encountered it before/

[crispy68]

To be honest, it would be difficult to give you an answer without actually seeing what you've done and your setup as there are thousands of settings. Can you provide a copy of your project file (.wbs) for us to look at?

[ptlycldy]

Sorry I've been slow to reply--Internet problems. Anyway, I've got a demo and .wbs file up:

The .wbs file is at http://ancodptest.epizy.com/Untitled3.wps and the three associated image files are at
http://ancodptest.epizy.com/images/Image1.jpg
http://ancodptest.epizy.com/images/Image2.jpg
http://ancodptest.epizy.com/images/Image3.jpg

Note: the Layout grid that is the problem/question has a red border and is visible on the screen in the presentation of the .wbs in wb 17 is not visible in the web site
http://ancodptest.epizy.com/


Thanks for you help.

[crispy68]

I took a look and you have several things incorrect.

1. Page -> Page Properties - Page alignment should not be set to center horizontally when creating floating layouts (using grids, flex containers, etc). Set this to "do not center this page".
2. You have the Card container inside a flex container but the flex container has position set to "absolute". This should be set to floating. You also need to make the Justify-Content = center. The card container should also be floating and set a maximum width of 1300.
3. Your page header should also be set to floating.
4. You have the carousel sitting on top of a flex container (the flex container is empty) but it is not actually inside it therefore it has an absolute position. If you want to insert a carousel into a flex container/grid you will need to set the carousel to "flexible". However, keep in mind this will make the text inside floating and they will not keep the absolute positioning you have. Instead, place the carousel into a floating layer set to full width, alignment = center.

you can download the changes I made above here.

[ptlycldy]

Thank you so much, Crispy---I've got a lot to learn.