[Silk UI Web] Sidebar - Changing Width

[Silk UI Web] Sidebar - Changing Width

Forge Component
Published on 28 Mar by OutSystems R&D
61 votes
Published on 28 Mar by OutSystems R&D
We are using The Lisbon theme with the right sidebar.  We would like to make the width of the sidebar smaller.  I know I can change the ".Sidebar" tag(s) in the CSS from 300px to 250px (see CSS below).  But when the "desktop" is displayed, there is still a 50px gap between the MainContent and the Sidebar.  What CSS setting am I missing, or what is the easiest way to change the width of the sidebar?  The Phone/Tablet/Small Desktop views all appear to be working fine.

/* Sidebar **********************************/
.Sidebar {
    right: -270px;
    width: 250px;

.desktop.small .Sidebar,
.tablet .Sidebar {
    right: -250px;

.desktop.small .Sidebar.open,
.tablet .Sidebar.open {
    -webkit-transform: translateX(-250px);
        -ms-transform: translateX(-250px);
            transform: translateX(-250px);
Have you used your browser's developer tools? Inspect Element will show you precisely what the inheritance is and where a partciular property is being set from.

Thanks Justin... found the other setting needed to shrink the sidebar.  Needed to change the "margin-right" to match the ".Sidebar" width:
/* If we use sidebar */
.desktop:not(.small).UseSidebar .Content {
    margin-right: 250px;