Twitter Bootstrap Not Being Mobile Friendly

So I am working on a prosject learning twitter bootstrap but got into the problem being that the website is not actually mobile friendly and look bad on big screens. Here is the l

Solution 1:

It seems that you are not using any classes provided by bootstrap. Instead you are creating your own id's? Bootstrap has a structured framework with the use of classes such as "container", "nav", "column".

For you to obtain a responsive design you must abide by the classes pre-provided. Might I suggest you check out a WYSIWYG bootstrap layout maker such as LayoutIt.

Solution 2:

Bootstrap comes with a grid-like architecture that will allow you to create sections in your page so that they all line up and stack appropriately. Become familiar with this first and then assign the right classes to each section. For example:

col-lg-12 is will create a section 100% wide.
col-lg-11 will create a section ~90% wide
...

col-lg-6 will create a section 50% wide

and so forth.

So to create the right placement of your divs or sections. add a row class to every section that is stackable. If you are having two sections side-side inside this row, add a col-lg-6 to each and they will line up next to each other and on top of each on mobile.

Now, to the obvious problems that I saw right away.

Between your body tags, create a wrapper class div that will contain your page and define it's width.

Do not use so much positioning. Specially position:fixed. This is what makes things sticky and messy. You wan to make use of your margin, padding, floats, and displays properties to properly align things.

Give it a try before I hand you any code. I want to see your brain work first. Then we'll trouble shoot some more.