center content, not working

  • 1
  • Question
  • Updated 7 years ago
  • Answered
I can't get the #content to center on the page. I want to make the width of it 1024px and I did that, but no centering code will work.
Photo of Jess Simonsen

Jess Simonsen

  • 19 Posts
  • 3 Reply Likes

Posted 7 years ago

  • 1
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Hi Jessica,

Would you mind sharing what type of content you are hoping to center? If you are in a text widget, simply highlight the text and then press the center alignment button. If you are speaking of a different widget, please share it with us! We will be glad to continue assisting you.
Photo of Jess Simonsen

Jess Simonsen

  • 19 Posts
  • 3 Reply Likes
I'm actually using html to edit the #content section of the template. None of the normal codes will work. I can't get the content or the main text and image area to center on the page if I make it bigger than it is normally set to be.
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Hi Jessica,
I'm not sure if I am completely understanding this, but to me it sounds like you are trying to center some text on the page in the HTML Widget. If that is the case, you can put
< center>
at the beginning of what you want centered and
< /center>

at the end.

Does that help?
Photo of Jess Simonsen

Jess Simonsen

  • 19 Posts
  • 3 Reply Likes
Um no that's not what I meant. I am changing the CSS for the page and I made the #content area wider than the template is set to be normally. Then I am trying to center the #content area on the page and it's not letting me... Does that make sense?
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Hi Jessica,
I see. I am going to ask a colleague of mine to come and take a look at this thread and see if she is able to offer any assistance. Thanks for your patience.

Emmy
Photo of Nazlie

Nazlie

  • 1721 Posts
  • 51 Reply Likes
Hi Jessica

It might have to do with the way in which the style is set up. Can you please share your website URL so that we can take a look at the code for you?

Thank you
Nazlie
Photo of Jess Simonsen

Jess Simonsen

  • 19 Posts
  • 3 Reply Likes
Photo of Nazlie

Nazlie

  • 1721 Posts
  • 51 Reply Likes
Thanks Jessica. I will have a look at this and let you know what I find.
Photo of Nazlie

Nazlie

  • 1721 Posts
  • 51 Reply Likes
Hello Jessica

After much investigation, I have to say I have not been successful.

I had a look at your source code and did some tests on a test site with the style template you are using. I think the reason that your page is staying left is possibly the Column Widgets - it has pushed the borders of the Sitebuilder out of alignment.

What I suggest, is that you save a copy of the page and test the centering there so that you don't spoil your existing home page. To do this, click the down-arrow next to "Save" and click on "Save As". Give the new saved page a name other than "index". Then you can test where the problem is. You'll have to trouble shoot each of the widgets individually to see where it has gone out of alignment.

Another way of doing it, is to create a completely new page and add all the elements: Column Widgets, text, pictures and any other elements you might have on the page. But first add the code to center the site. You've mentioned that you want to center the #content, but I think you should try to do it on .container. The .container element already has the code that centers the page. The page width is 900px so if you make it wider, you may have problems of it not centering.

What I've done on my test site, is to add this so I can see the borders of the container:
.container {
border: solid 1px #000000;
}

If any content widgets go beyond that border, the page will most likely not be centered.

Please try this and let us know if it helps. Good luck!

Thank you