Flex Grid Overlapping

[necko77]

Hello,

I have a little problem and I hope that someone can help me:

I'm building a site and I have inserted 2 flex grids, one above the other, and when I'm scaling my page to see how my breakpoints work, the second flex grid is not aware of the first flex grid changing its size, so its content became overlapped...

Is there a way to do this, please check out the little gif presentation of the problem:
It is not practical to have one big flex grid...I like to cut them into a few smaller grids...

https://photos.app.goo.gl/8kLvMyffFSgLnHDN8

[Pablo]

To be able to help you, I need a project file.

Note that I do not need to full website, only a small demo with one page and the elements relevant to your question.

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

[necko77]

The site is small, I just started building it and the link is below:

https://drive.google.com/file/d/1EbzPSi ... sp=sharing

Thx Pablos

[Pablo]

I'm sorry, but it is not clear to where in your project I need to look.
Can you please remove all content form the project which is not relevant to your question, so it's immediately clear what you are trying to do?

[necko77]

https://drive.google.com/file/d/1rvBeO7 ... sp=sharing

Go to page TC, start preview F5, go to the middle of the page, there are two Flexgids, Flexgrid3 and Flexgrid2(check out Object manager).
When I resize my chrome window those two flex grids are overlapping. As Flexgrid2 is not aware of Flexgrid3.
Thx

I went to eat something in the meantime...

[Pablo]

You have set the height of the first flex grid to 'fixed', so the height is always same no matter the content. That is why the second grid overlaps the first one.
I recommend to set the height to 'auto' instead.

[necko77]

Your recommendation accepted and immediately I see no more overlapping

Thank you!

[necko77]

I have continued work on my web site and I have the next problem:

On this link you can find the site:

https://drive.google.com/file/d/1j5E9ng ... sp=sharing

I have master-page and on that page, I have PageHeader with some pics, text, and CSS menu.

If you go to the TC page from the Site Manager, you will see that Flexgrid3 is not aware of PageHeader from master-page.

Because of that, I'm not able to set bookmarks and I don't understand why the offset in my Bookmark is not working?

I have set one bookmark but I can't make it work...It always goes somewhere wrong.
If I change offset in Bookmark - nothing changes.

Thx for any help!

[Pablo]

This is the same issue.
The page header is fixed. So, floating content will not be affected by the size of the header.

See also:
https://www.w3schools.com/css/css_positioning.asp

Bookmark offsets only work when you enable Smooth Scrolling because the offset is controlled by JavaScript.

[necko77]

Thank you for your time, Pablo.

Please, can you tell me am I able to use the page header full-screen option but without disappearing?
I want to adjust the page header to move down as user scroll down, to be always visible and on top of everything. So page-header is excellent except I have to insert 24 hours or more in Animation - Delay. Even I have set Animation to (none)...

From Help:
Fullscreen
The header will be hidden by default and become visible when the user moves the mouse over the header. So the header is only visible when needed.
This mode also supports animations to slide or fade the header into view.


Can I change this default function to none?

thank you

[Pablo]

You can set the page header to 'fixed' to keep it always visible.
In HTML, a 'fixed' element does not affect the position of 'floating' elements (like layout girds).
So, the first floating element will be positioned behind the header.
To prevent this you can (for example) give the first layout grid a margin at the top.

[necko77]

Can you tell me is it possible to use a sticky layer in this case?

I have a problem if I put the sticky layer on a master-page then the sticky layer is displayed under the cards...
If I put sticky layer on page then it works ok.

So can a sticky layer be on the top of cards if it is located on master-page?

[Pablo]

If the sticky layer is behind other content then there is most likely an issue with order of the elements.
To be able to help you, I need to see what you have done.

[necko77]

https://drive.google.com/file/d/15WTLZ2 ... sp=sharing

https://photos.app.goo.gl/G5oK3z4SDLtdeWjg9

Go to Page TC, start preview.

The Brown color layer is located on the master page and I can't put it in front of the cards. It is located above the text but the cards are above...
If I put it on TC page then it goes on the top...

The White is a page header and it is working...(located on master-page)

I understand that the page header is a simplified layer? Is that correct?

All I want is to have a layer with an image and menu to be sticky and on the top of everything and to stay sticky while users navigate through the site...
while flex grids are aware of that layer (page header in my case) if that's possible

[Pablo]

Because the sticky layer is on the master page it will be behind all other content because a master page is basically a 'background layer' for the content page.

To put the sticky layer in the front:
- right click the sticky layer
- select 'Object HTML'
- select 'Custom Style'
- enter this code:

Code: Select all

z-index: 9999 !important;

I understand that the page header is a simplified layer? Is that correct?

Correct

[necko77]

Thank you!