Changing width of columns on Spectrum

  • Unknown's avatar
    psalmboxkey · Member ·

    How do I change the column widths on the blog page with Spectrum. Would like to have a larger center column (so photos will be larger), smaller column on the right for widgets.

    Changing the CSS number cuts off photos in slide shows and videos.

    Thanks for any help.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    I don’t know that you would want to go much narrower on the sidebar. You can give the following a try, which decreases the sidebar from 300px to 250px and adds that 50px to the content area. 

    #sidebar {
    width: 250px;
}
#content {
    width: 710px;
}
img.size-full, img.size-large {
    max-width: 710px;
    width: 100%;
}

    What I might suggest over the above solution would be to increase the width of the overall theme from 1000px to 1200px and then increase the width of the content area by that 200px. Try the following after trying the above. 

    #header, #main-wrap, #footer {
    width: 1200px !important;
}
#content {
    width: 860px;
}
img.size-full, img.size-large {
    width: 100%;
}

    If you choose this method, below the CSS edit area in the Customizer, enter 740 into the Media Width field so that any full-sized images will come in and use the full new width.

    Just as an added thing to think about, Spectrum is a fixed width theme, so it doesn’t adjust for smaller screens/windows. You may wish to consider one of our Responsive Layout Themes, which will adjust the design and content for all screen/window widths, clear down to phones. They are designed to show your content in the best way possible on all screens whereas Spectrum is best viewed on a computer screen.

  • Unknown's avatar
    psalmboxkey · Member ·

    Thanks for the suggestions! A couple questions . . .
    in each of the windows above, I’m not sure where to make these changes . . . In Appearance? doesn’t seem to be a place to make these changes.

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, sorry. The above is custom CSS. Go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the custom CSS. You can paste in one of the solutions and see what you think, and then delete that and try the other.

    Let me know how things go.

  • The topic ‘Changing width of columns on Spectrum’ is closed to new replies.