[Silk UI Framework] Sidebar - Changing Width

[Silk UI Framework] Sidebar - Changing Width

  
Forge Component
(45)
Published on 10 May by OutSystems Labs
45 votes
Published on 10 May by OutSystems Labs
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.

J.Ja
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;
}