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?
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.
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.
1 user says Thank You to Saguaros for this useful post