Using flexbox in custom CSS & HTML

[[[global:former-user]]]

Hi Armin,

I just created a type of "vertical Grid" that I wanted to lay beneath the content of my website. You can look at the code here (https://jsfiddle.net/5k66obh2/) I used Flexbox to do that.

But when I now copy the code into the "Custom CSS & HTML" section from Lay Theme it totally destroys my website.

Is this because Lay Theme itself uses Flexbox?

Best,
Quirin

[arminunruh]

Lay Theme uses flexbox. Also there is already a div with an id of "grid" in lay theme that might be the reason why your css crashes the layout. I think it's a good idea if you can rename your ids and classes and use a prefix like "qvoder". So it would be "#qvoder-grid".
If you add your grid's html into "Custom CSS & HTML" -> "Custom HTML at bottom" for example then it should work I think.

[[[global:former-user]]]

Hi Armin,
thanks for the answer! I just implemented your tips. Now the layout of the website stays intact but the grid begins straight underneath the website. And when I add the HTML to the "Custom HTML at top" the grid is above the website. So it looks like there isn't a way to "combine" the grid and the website.

Best,
Quirin

[arminunruh]

Hey Quirin,
If you want your grid underneath lay themes grid why dont you try position: absolute or position: fixed with your grid

#qvoder-grid{
position: fixed;
top: 0;
left: 0;
z-index: -1;
}

Not sure if the z-index value is the right one, maybe you have to play with that value.

[[[global:former-user]]]

Hi Armin,
thank you! It works! The Grid lies underneath the website. But now another problem occurs. The Footer disappears. The "funny" thing is. If I deselect the footer (Lay Options > Footers) the grid also disappears. And if i activate the footer the grid also comes back. Ahh one problem solved, another one comes up : )

Best,
Quirin

[arminunruh]

is the option "sticky footer" active? maybe that is the problem, not sure.

[[[global:former-user]]]

Hey Armin,
jep is active. And if I deselect the option the grid disappears and the footer comes back.

Best,
Quirin

[arminunruh]

hmm,
does it change anything if you dont use flexbox for your grid?
not 100% sure whats going on there.

[[[global:former-user]]]

Yeah all kinda weird there. No, didn't try it without using flexbox. Barely got the grid together using flexbox. Because flexbox was/is relatively easy to understand for me. My skills regarding coding are very basic ;)

Right now the footer is more important. The Grid would be a nice to have but is not essentially for the website. More a cosmetic thing.

Best, Quirin