Bootstrap Simple but I am too Colum Squares

[hooskanoonun]

Hi anyone reading this,

I'm a very new person to code so please go easy on me

I making this site for university using a bootstrap template, I opened it in mobile and the page implodes.

I realise now that i haven't been using the code of bootstrap at all and i've been fighting it with my own bad code and i'm in rather a mess.

As you can see most of my page is made of of side by side boxes, currently these boxes squish into each other as i resize my page (and the text overflows).

What I want is side by side boxes (column of 6 width each) and a height to them that means they will always behave like a ridged square so text isn't impaired. As soon as both boxes can be contained I would like the boxes to go underneath each other. How do i do this. I'm gonna be up all night working so please help however you can and try to dumb it down for me cuz ive been doing this for like two weeks.

I understand that the code is bad in many other places but I can fix the most of that.

This is the site btw, I know it's lame but it's my first sight

uink

Cheers for any help

Adam

[BenPleysier · Accepted solution]

Not trying to be pedantic, but you should not use units for video dimensions, only digits are allowed as per HTML video width Attribute

The next problem is the menu bar. Keep in mind that Bootstrap is mobile first, meaning that the menu bar should be designed for the narrower real estate of a mobile phone. Once there is more room, the menu bar can be expanded. One of the most common methods is to use a collapsed menu bar and using a so-called hamburger image to expose it.

For collapse, have a look at http://getbootstrap.com/javascript/#collapse

For the complete menu bar, see http://getbootstrap.com/components/#navbar