Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Andrew Winkler Friend

    I would like to reduce the width of sidebar-1 by one third and sidebar-2 by two thirds and increase the width of the message and component block in the main content area accordingly. I had a quick look in Firebug but could not find the settings needed to overwrite in custom.css. How can I achieve the width changes?

    Saguaros Moderator

    Hi Andrew,

    This template is built with Bootstrap, you can check out this docs for how to work with its Grid system:


    Andrew Winkler Friend

    Could you please provide me with more specific instructions, or link to it. The link provided contains quite generic information, but no specific information on how to change the width of sidebar-1 and sidebar-2.

    Saguaros Moderator

    Hi Andrew,

    Suppose that you’re using 2 sidebars, you will open this file:

    As you can see the 3 parts: main content – sidebar-1 – sidebar-2 are included in a div tag with row class. In Bootstrap, each row will have 12 grids, by default, the content part will have ‘col-xs-12 col-md-6 col-md-push-3’ class which is equal to 6 grids, and 3 grids for each sidebar.

    You can change the width of sidebar by changing the number of grids but make sure that the total grid is equal to 12. For example, if you want to reduce the width of both sidebar from 3 grids to 2 grids, you will change to col-md-2, then increase the grid for ‘main content’ part to make sure that the total grid is 12.

    The documentation I sent above gives details of how to work with grid.

    pls check it out.


Viewing 4 posts - 1 through 4 (of 4 total)

This topic contains 3 replies, has 2 voices, and was last updated by  Saguaros 6 years, 3 months ago.

We moved to new unified forum. Please post all new support queries in our New Forum