Need help? Check out our Support site, then


Change content width?

  1. I am trying to change the width of the content pane on the Sorbet theme. I paid for the custom design package. There is a box on the customize your blog menu where you can change the content width. Any number I put in over 800 does not seem to change the width to make it wider. I know the width can be changed. Any ideas?

    The blog I need help with is tjclc.wordpress.com.

  2. Hi there, you first have to widen the content area with CSS, and then enter the new content width in the Content Width box, which is the value WordPress uses to size your images and videos that are inserted full width. As it stands, the overall content area is about 700px in width but there is padding of 27px on each side, which means the actual content width is 700 - 54 = 646.

    Add the following and adjust the width as you desire. The width had been in em units, but I switched it to px to make it easier. The content and sidebar are in % widths, so there isn't an exact correlation between the overall width increase and what you can enter into the Content Width box. You will have to play with that a little to see what works best. If you increase the overall width by 200px, you should be able to use 790 for content width.

    .site-content {
        max-width: 1000px;
    }

    Oh yeah and by the way, YES to more coding ladies. :)

  3. Thank you so much. Worked like a charm. I was able to make a host of other changes after doing some investigating using the inspect element tool in Chrome. I'm stuck on one last thing and since you were so kind to help the first time, I figured I should ask. Right now, I have the content width where I'd like it to be. However, the masthead (or site heading, site description section) is not as wide as the content area and I think it looks unbalanced. I've been trying to figure out which width to change that would affect this (or maybe it's a padding issue), but I've not made any progress. Can you help? (My group of coding ladies will be forever thankful.)

  4. Hi there, add the following and it comes close. The icons at top right were a little further right than the sidebar widgets, so I added a touch of right padding to align them. I also widened the div the icons are in by a bit so that the icons stay on one line as the browser window narrows.

    .site-header-wrapper {
        max-width: 1166px;
        padding-right: 30px;
    }
    
    .toggles {
    width: 40%;
    }
  5. Hi Sacred Path, I seem to be having the same kind of problem. I tried doing what you told riagalanos but it didn't work out.
    I am trying to increase the width of the images on my blog.
    Thsi is the blog I am talking about: http://joanafaria.wordpress.com

  6. Hi @daisygarden, you are using the Adelle theme, and this thread is about Sobet and CSS is generally theme specific. To avoid confusion for those coming to this thread in the future, could you please start a new thread in the CSS Customization forum and I will watch for your new posting? Many thanks in advance.

  7. Thank you. That did the trick. At this point, I think I'm done with the design. I went to test the mobile version view and while most of it looks nice, the toggles (is that what they are called?) do not line up where they are supposed to. I have no idea where to begin to try and fix this.

  8. Hmmm, my bad. Take the following out of your custom CSS.

    .toggles {
        width: 40%;
    }
  9. Oh, and add the following at the very bottom of your custom CSS to take car of the overlapping of the toggles with the site description.

    @media screen and (max-width: 420px) {
        .site-header-wrapper {
            height: 185px !important;
        }
        .toggles {
            margin-top: 40px;
        }
    }
    
    @media screen and (max-width: 387px) {
        .site-header-wrapper {
            height: 225px !important;
        }
        .toggles {
            margin-top: 85px;
        }
    }
  10. This worked. Design is finished and now the girls can work on content. Thanks again for your help...much appreciated!

  11. Yay, and best of luck on the content, and you are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic