Custom Site Max Width

[Zachy]

Hi all,

I’m trying to do a 50% width for my site and center the elements within it.

I’ve been able to shrink the size of the container and center it but the content within the container is getting cut off.

This is the custom CSS currently in place:

#container {
width: 50%;
max-width: 50%;
margin: 0 auto;
opacity: 0.9;
filter: alpha(opacity=90); /* For IE8 and earlier */
}

Any suggestions are appreciated, thank you!
Zach

Attachments:

You must be logged in to view attached files.

[Zachy]

Never mind I’m all set on the sizing!

Thank you anyways!

[Kyle – SUPPORT]

No problem

[Zachy]

Hey all,

I’m hoping to reopen this topic for a different website.

Is there anyway to customize the max site width and have the content adjust with it.

[Mohammad – SUPPORT]

Hi,
Please provide me website url and marked screenshot to explain your issue better.
Thanks
Mohammad

[Zachy]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,
Do you want to remove white faded background?
Thanks
Mohammad

[Zachy]

No sir I was hoping to adjust the width of the boxed layout. If you check out the screenshot on my last post that shows the Theme Options for Max Site Width, that’s what I’d like to customize.

Basically I want to adjust the width of the content container. How wide the white faded part actually is.

[Kyle – SUPPORT]

Hi

You could add this to your css, but you may discover some layout issues:

#container.boxed-layout, .layout-boxed #super-search, body.layout-boxed > .sf-super-search {
  width: 1070px;
}

– Kyle

[whistle]

Hi there,

For those who are wanting to narrow the site down…

Neighbourhood is using bootstrap v2.2.2
Reading through the docs, I’ve found a less file.

http://getbootstrap.com/2.3.2/customize.html
https://github.com/twbs/bootstrap/blob/v2.3.2/README.md#compiling-css-and-javascript gets into detail how to compile and build files.

I’ve changed the //Grid directives, for gridColumnWidth1200 / gridGutterWidth1200 – these are the variables that are used in less to define column sizes for the @media screen min-width:1200 break-point.

Cleanest way I could think of is to change that back to a grid size of 60px, so that it reverts back to the default 940px grid:

@gridColumnWidth1200: 60px;
@gridGutterWidth1200: 20px;

Built it afterwards, grabbed the bootstrap-responsive.min.css code and chucked that after the bootstrap-responsive.min.css file in the neighbourhood theme.

Poof, now I’ve got a narrower site. 🙂

Attached the file, download it and replace the one in SITE_ROOT/wp-content/themes/neighbourhood/css/

Not fully tested though… going through the site and patching up some things as I go.

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Nice work! Appreciate that!

– Kyle