Max width of 1200 px and centered

Dec 10, 2014 at 4:36 PM
My client wants the desktop version of their landing page to be fixed width and centered. I have tried all that I can think of to no avail. Any Ideas?

I have tried the following.

MainRow

{
float: none !important;
margin: 0 auto !important;
}

and many other similar things to no avail. Please help, deadline looming as usual.

Thanks,

John
Coordinator
Dec 10, 2014 at 10:57 PM
Without looking at how you implemented all of your html, id's and classes, how about:

mainrow {

max-width: 1200px;
}
Dec 12, 2014 at 4:10 PM
Edited Dec 12, 2014 at 4:11 PM
Hi,

Both margins need to be auto and your width needs to be set in 2 places. Please see below:
On the boostrap3-custom.min.css (or the relevant custom css file you use) you need to add this:

.container
{
max-width:1316px;
width:1284px;

}

Then on the boostrap3.min.css you need to add this:

.container
{
padding-right:16px;
padding-left:16px;
margin: auto auto;
max-width:auto;
width:auto;
}

I hope this helps
Coordinator
Dec 12, 2014 at 5:41 PM
Hi Catherine,

Thank you for the additional suggestions.

My concern with this approach is that .container may be nested, so you want to make sure to target your specific top most containing wrapper .container.

Second, there are some system admin pages that use a .container class. A suggestion I heard a few days back at SP Fest Chicago (http://www.sharepointfest.com/Chicago/abstracts/44/246-dev204) from Rebecca LaRu I believe was to create your own .custom-container like class that you use are your "container". Have it use the same styles as .container, but this way you can now get around the inherent SP issues with a preused ".container", as well as then target your specific wrapper very quickly and easily. A great idea.

Eric