Hi,
my peak theme has been customized in order to have a right hand side sidebar.
How can I make this sidebar a little wider without widening the browser window?
I tried to use the following custom css:
.sidebar {
width: 600px;
}
(see first attached image)
But it only made the sidebar much wider on its right hand side (see second attached picture), instead of widening it towards its left hand side thus having the main content panel shrink (the idea is to have the sidebar occupy 1/3rd of the available screen).
The @media rule is used to define different style rules for different media types/devices.
We are targeting that specific element/div using this CSS “.sidebar-right-nav.threecol.last”
The right sidebar shares the classes(CSS class) “sidebar-right-nav”, “threecol”and “last” and by cascading these classes we are arriving at our targeted div/element as a result we can style the particular elements properly.