WordPress.org

Ready to get started?Download WordPress

Forums

How to reduce width of sidebar one (4 posts)

  1. AtaArticles
    Member
    Posted 4 years ago #

    Ok,
    I have been searching and reading several threads related to changing the sidebar problem that wordpress users have experienced. I tried changing the pixels in container, sidebar width and margin but it doesn't seem to work.

    My site: ataarticles.com
    has two sidbars on the left.
    Now referring to the code in css:
    http://www.ataarticles.com/wp-content/themes/articledirectory/style.css

    I tried increasing wrapper first and then increase by 10 pixels in each div:

    Eg:

    [CSS moderated as per the Forum Rules.]

    Any suggestions as i realise i must be doing something wrong here.

    Thanks.

    Ata

  2. elfin
    Moderator
    Posted 4 years ago #

    I changed #content width to 500px
    and adjusted #container background to 500px

    That worked for me, at least in firefox - or did you want something else?

  3. AtaArticles
    Member
    Posted 4 years ago #

    Ok, if you mean change these divs to 500px,

    #container {
    width: 100%;
    background: url(i/dots.gif) 500px 0 repeat-y;
    margin-bottom: 10px;
    }
    * html #container {height: 1%;}
    #container:after {
    content: '.';
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
    }
    #content {
    width: 490px;
    float: left;
    padding: 0 10px 20px 0;
    overflow: hidden;
    }

    it doesn't work
    what happens is that the text overlaps the grey vertical line which separates sidebar 1 and 2. There has to be a 10px difference between content width and container background.

    Also, you only have one sidebar so it may work for you. Thanks.

    Regarding the sidebar content, there is no px shown, so i don't think anything needs adding here.
    * html #sidebars {height: 1%;}
    #sidebars:after {
    content: ;
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
    }

    Thanks.

  4. elfin
    Moderator
    Posted 4 years ago #

    /* Content
    -----------------------------------------------------------------------------*/
    #container {
    	width: 100%;
    	background: url(i/dots.gif) 500px 0 repeat-y;
    	margin-bottom: 10px;
    }
    * html #container {height: 1%;}
    #container:after {
    	content: '.';
    	display: block;
    	clear: both;
    	visibility: hidden;
    	height: 0;
    }
    #content {
    	width: 490px;
    	float: left;
    	padding: 0 10px 20px 0;
    	overflow: hidden;
    }

    making those changes via firebug in Firefox works for me, no text overlap. Are you using a different browser?

Topic Closed

This topic has been closed to new replies.

About this Topic