CSS Style Override - Widen Content?

  • 1
  • Question
  • Updated 6 years ago
I'm trying to amend the layout "NoFrills" with some CSS overrides to allow the content to take up more room, however, it isn't working.

I'd like to move the menu over to the left a little to allow me to widen out the content as below:



And I think this is the piece of code I need to amend but its a different colour to all the rest and has no effect when I change it...



very frustrating, as a LOT of the screen is wasted with the narrow layouts and I need one with a menu down the side and not along the top.

Can anyone help?
Photo of graham

graham

  • 18 Posts
  • 0 Reply Likes

Posted 6 years ago

  • 1
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello graham

I think I can help.

First of all I'd like to point out to you that the whole CSS code of your Style has been added to the left override box in your CSS Editor. This is not the correct way to edit your Site CSS, and can result in errors or dysfunctionality. Please only add the code to be changed to that left box.

If you haven't changed anything about your CSS code yet, you can just delete the whole code from the left box. If you have changed certain tags, make sure to remove any code except for the tags changed.

Once done, please add this code as an example to work on to the left box:
#container {

width: 1200px;
}

#header {
width:1200px;
}

#content {
width: 945px;
}

.sys_footer {
width:1070px;
}

You will be able to adjust the values for "width". If you add 100px to the container width, also add 100px to the other widths, or if you take away px, take the same amount away for every width.

1200px is quite wide. For design and legibility reasons I wouldn't recommend to use too much space to add content. This can be overwhelming for your visitors, and make them leave your site and not come back again.

For more information please see our tutorial How to edit your Site CSS.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Graham,

If you set your container margin to a negative value this will force the menu and contents left. Here is a simple play with figures I pulled and then added Stefan's width of 1200 pixels to open the container area as well.

The margin can be adjusted. A minus value simply pushes it left of the default setting and the number is the amount left it goes.

#container {
margin: -100px;
width: 1200px;
}


The default width for this style is 1380 pixels so you can move the container width quite a way. There are many winning sites which have similar layout so it's a good strategy to open it up as wide as you like.