WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to change the container size? (7 posts)

  1. culture-cross
    Member
    Posted 2 years ago #

    I need to change the container size (width) for my site, and I don't know how!
    I looked in the CSS Stylesheet but I can't find #container.
    I've read that I need to find #container and change the width.
    Can someone please tell me how to find the #container and change the container width?

    Also, I assume I would need to make room for the larger container? How do I move the side bars and widgets to make room for the larger container?
    There is plenty of empty room on the sides of the site.

    Thank you!!!

  2. alchymyth
    Forum Moderator
    Posted 2 years ago #

    the css id for your site might be different, as this will depend on your used theme;
    try to work with a web tool such as Firebug http://getfirebug.com/ to identify the involved css selctors.

    to get any help through this forum, please post a link to your site.

  3. culture-cross
    Member
    Posted 2 years ago #

    Thanks!
    Here is a link to the site:
    http://www.culture-cross.org/creations/?wpsc-product=necklace
    notice how the text goes beyond the container. I think making the container larger will help. There is room for a larger container.

    How do I use Firebug to change the container size?

    Thank you!!

  4. alchymyth
    Forum Moderator
    Posted 2 years ago #

    Firebug is an analytic tool only, to help you to identify the involved css elements - changes need to be done in the style.css of your theme.

    you will need a basic to good knowledge of html and css.

    change the width of a few styles in style.css of your theme;
    the sections below show the increased width (increased by 150px):

    #wrap {
    	background: #FFFFFF;
    	width: 930px;
    	margin: 0px auto 0px;
    #header {
    	width: 830px;
    	height:120px;
    .splash { width:910px; padding:30px 30px 0; }
    #content {
    	width: 910px;
    	margin: 0px auto 0px;
    #contentleft {
    	float: left;
    	width: 650px;
    #footer {
    	width: 930px;
    	background: #eee;
    .footer {
    	width: 890px;
    	margin: 0px auto 0px;
  5. culture-cross
    Member
    Posted 2 years ago #

    I DID IT!!!
    I got firebug and used the pointer thing that tells you whats what,
    then I just messed around with the width for each part that I found with firebug until it looked right.
    AWESOME
    thank you so much!

  6. salevene930
    Member
    Posted 1 year ago #

    Hi Guys - I'm having trouble getting Firebug to locate any code. I've loaded the web page and clicked on the 'pointer thing', but I'm nothing is happening. Any advice?

    Thanks in advance

  7. Andrew
    Forum Moderator
    Posted 1 year ago #

    Create your own thread on the issue.

Topic Closed

This topic has been closed to new replies.

About this Topic