Using flexbox in custom CSS & HTML

---

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

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.

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

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.

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

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

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

Best,
Quirin

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

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