Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter borsanalisi

    (@borsanalisi)

    I tried to modify the style.css code:
    #sidebar {
    margin-left: -1px;
    float: right;
    width: 500px;
    position: relative;
    top: 0;
    padding: 6px 12px 18px 12px;
    }

    I have modify the width to 500px but nothing, the sidebar remains identical…
    Thanks in advance for your help 🙂

    Hi @borsanalisi!

    Could you give the following CSS a try?

    @media only screen and (min-width: 876px) {
        .site-header, .widget-area {
            width: 30%;
        }
    
        .content-area {
            width: 70%;
        }
    }

    Increase/decrease the value of the first width from 30% to increase/decrease the width of the sidebar. The value of the second width will need to be adjusted from 70% so that both values add up to 100% (else the sidebar will fall underneath the main content).

    In case you’re not aware of how to add CSS to your site: Firstly set up a child theme or activate a custom CSS plugin. (If you have Jetpack installed then you can activate its custom CSS module.)

    I strongly advise against editing your theme’s style.css directly as any changes you make there will be lost when it comes time to update the theme.

    Let me know how you get on with the above CSS! If it doesn’t help out, please could you reply back with a link to your site? I can then look into the site’s existing code and make sure the CSS I provide to you is accurate (the above is based on a clean install of the P2 theme, but “real” sites sometimes have extra code from third-party sources that may cause a conflict).

    Thanks!

    Thread Starter borsanalisi

    (@borsanalisi)

    thank you very much!!!

    You’re most welcome! 🙂 Let us know if anything else comes up.

Viewing 4 replies - 1 through 4 (of 4 total)

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