sidebar width

This topic is: resolved

Tagged: 

This topic contains 4 replies, has 3 voices, and was last updated by Antonio Scotti Antonio Scotti 1 year, 6 months ago.

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

    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

    Attachments:
    #29053
    Raghavendra
    Raghavendra
    Moderator
    Post count: 4607

    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
    Antonio Scotti
    Participant
    Post count: 39

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

    #29077
    Veena
    Veena
    Moderator
    Post count: 8142

    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
    Antonio Scotti
    Participant
    Post count: 39

    Many thanks!!!

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘sidebar width’ is closed to new replies.