Sectioning with Flexbox, cannot find it in code

I am trying to change layout and reposition three videos.

I want the left video to take up 8 columns, and then two smaller on the right to take remaining 4 columns, one small video next to another

I cannot find where in the existing code the flex settings (flex: 0 0 100%:wink: are written:

I read the CSS file over and over but cannoit find that place so I can edit there. Any help is appreciated. Thanks!

col-12 is a Bootstrap class, look at the docs to see how to use the different layout classes.

As @lasjorg pointed out, this code is using Bootstrap. I think that Bootstrap is using CSS Grid under the covers for these classes, rather than flex. I could be wrong though.

Pretty sure Bootstrap is still using Flexbox.

Thank you! I have changed names of classes but the proportioning with flexbox does not work:

Videos just go one after another in one column:

Thanks!

┐( ∵ )┌
I’ve been wrong before.

Does your video elements actually have a flexbox parent container?

Also, can we please get something other than screenshots to work with? Take the relevant section out of the php and make a Codepen or something.

Hi Lasse,

Thanks! Here is the codepen: https://codepen.io/zelenskaya/pen/GRJrwmo
and here is the previous iteration of the site: https://workspace.stilwerk.com/

I have a local version of the site on my laptop, perhaps I can share it via git?

Also a weird thing has happened. I don’t know what I did to break everything but now the page on my local version looks like this. I tried to copy and paste style.scss from the original version but that does not help.

As far as I can see you only have the text left

This ussually means that the webpage cannot acces the fonts/images.
You need to check and make sure every thing is properly linked.

guess it’s about linking css, but where is it linked in the code? Previous iteration of this site is live at https://workspace.stilwerk.com/

Are you trying to get rid of Bootstrap?

Here it is using Bootstrap. I tried to use some responsive classes but I never use Bootstrap so everything just takes so long when you have to go through the docs, so the stacked layout isn’t great.

Yes exactly, I also don’t want to learn Bootstrap and I hope all can be done without it

Thanks for creating a Bootstrao layout!

Well, I needed the workout anyway, so here are two versions.

Flexbox version

Grid version

1 Like

Thank you SO MUCH Lasse!