sidebar width

Tagged: 

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #29043
    Antonio Scotti
    Participant

    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).

    Help appreciated
    Regards
    Antonio

    #29053
    Raghavendra
    Moderator

    Pls try the following Custom CSS after you remove the existing one you added to set width to 600px –

    @media only screen and (min-width: 768px) {
        .sidebar-right-nav.threecol.last {
            width: 33%;
            padding-left: 30px;
        }
    
        div#content {
            width: 66.66%;
        }
    }
    
    #29069
    Antonio Scotti
    Participant

    Thanks Raghavendra!
    By the way what does it mean “@media only screen and” and “.sidebar-right-nav.threecol.last?”

    #29077
    Veena
    Moderator

    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.

    #29086
    Antonio Scotti
    Participant

    Many thanks!!!

Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘sidebar width’ is closed to new replies.