Question

Being new to CSS, I have looked at similar posts on stackoverflow regarding this issue, but none of the resolutions seem to help with my site.

I am using a template for the site and trying to edit the CSS so that the page will maintain one width, and not shift it’s elements when the window is resized.

An example page can be found here: (removed link for client)

The content is contained within a wrapper currently set to relative position:

#page_wrapper 
{
    position: relative;
}

I tried to change it to this:

#page_wrapper 
{
min-width: 960px;
}

This doesn’t seem to be doing the trick though. When I resize the window, everything still shifts. Any ideas what else I need to change?

Answer 1

Your site is using Twitter Bootstrap: twitter.github.com/bootstrap/

It won’t be a totally simple process to do what you want but a starting point would be going to this page:

http://twitter.github.com/bootstrap/customize.html

There you could uncheck the “Responsive” checkboxes and change the Grid System elements to be whsatever you want. It may however be best to leave those as they are.

Then download the css files and replace the ones on your site and see if that helps (ensure you make a back-up of your current files first).