Change content width?

  • Author
    Posts
  • #1645407

    riagalanos
    Member

    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.

    #1645458

    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. :)

    #1645526

    riagalanos
    Member

    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.)

    #1645528

    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%;
    }
    #1645554

    daisygarden
    Member

    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

    #1645562

    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.

    #1645565

    riagalanos
    Member

    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.

    #1645578

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

    .toggles {
        width: 40%;
    }
    #1645579

    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;
        }
    }
    #1645580

    riagalanos
    Member

    This worked. Design is finished and now the girls can work on content. Thanks again for your help…much appreciated!

    #1645581

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

The topic ‘Change content width?’ is closed to new replies.