Narrowing width of sidebar widgets

  • Unknown's avatar
    moneyfitcfs · Member ·

    I am trying to reduce the width of sidebar widgets, but it isn’t working. What is the proper CSS code?

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

  • fstat · Staff ·

    Here is the CSS code 

    .widget-area {
	width: 250px;
}

    change the width according to your needs.

  • Unknown's avatar
    moneyfitcfs · Member ·

    Thanks! That worked. But I thought that with the widgets narrowed, the main body content would automatically fill in that space to the right, but that does not seem to be happening. Narrowing the widgets just leaves blank space to the left of them. Is there a way to make sure that the main page content fills in that space?

  • fstat · Staff ·

    Here’s the code for the main area 

    #primary {
	width: 800px;
}
  • Unknown's avatar
    moneyfitcfs · Member ·

    Thanks, but now by setting specific width, it appears that the content no longer automatically wraps to fill the space for people with different size monitors, or if you zoom in or out. I don’t want anyone to have to scroll horizontally. All I want is for the site to behave the way it always did with the default settings, but with the widget boxes on the right narrower. Is there no way to accomplish this?

  • Unknown's avatar
    thesacredpath · Member ·

    Hi @moneyfitcfs, give the following a try. It sets a max width for the content and sidebar and then sets a width of 100%. Even though the original widths were static values (in pixels) the theme itself handled the reduction in width, so we have to go about things a bit differently. 

    .widget-area {
    max-width: 250px;
    width: 100%;
}
body:not(.full-width-layout) .content-area {
    max-width: 830px;
    width: 100%;
}

    I notice you are using a table and if you narrow your browser window, you will see that the table extends out of the right side of the browser window. Tables don’t work well with responsive design themes such as Sequential. Let me know if you wish me to work on this for you. It will require redoing that section of your home page using divs and then creating some CSS and Media Queries to handle things on narrower screens.

  • The topic ‘Narrowing width of sidebar widgets’ is closed to new replies.