WordPress.org

Ready to get started?Download WordPress

Forums

[Theme Twenty Eleven] Responsive site issues (4 posts)

  1. sebassah
    Member
    Posted 1 year ago #

    Hi guys,

    on a website for a client there had been some issues with the side bar of the twenty eleven based wordpress website.

    After some googeling ive managed to get the sidebar to the right again, but it seems to be stuck under the main content.

    There are a lot of variables in the CSS, trial and error didnt work. The sidebar has a fixed width. How can I make sure it shows next to the content on tablets and phones?

    /* =Responsive Structure for narrow screens
    * to keep min width and sidebar
    -------------------------------------------- */
    @media (max-width: 800px) {
         #page {
           min-width:500px;
             }
    /* keep the sidebar - for right sidebar */
        .right-sidebar #main #content {
            margin: 0 0% 0 1%;
            width: 65%;
        }
        .right-sidebar #main #secondary {
            float: right;
            margin: 0 1% 0 1%;
            width: 35%;
        }
    /* keep the sidebar - for left sidebar */
        .left-sidebar #main #content {
            margin: 0 1% 0 29%;
            width: 70%;
        }
        .left-sidebar #main #secondary {
            float: right;
            margin: 0 -1% 0 2%;
            width: 24%;
        }
    /* correction for 'showcase' template */
        .page-template-showcase-php #main #primary.showcase {
            float: right;
            margin: 0 2% 0 2%;
            width: 96%;
        }
    }

    Thanks in advance!

    Seb

  2. atul1280
    Member
    Posted 1 year ago #

    A link to the page in question is needed to check.

  3. sebassah
    Member
    Posted 1 year ago #

    You are right sorry!

    http://www.noanoanederland.nl

  4. atul1280
    Member
    Posted 1 year ago #

    You need to set the width of #primary for responsive layout in %. The main #primary div is set as 500px wide and the responsive layout is taking that. Just override it with % based width for responsive. You may need to do some experiment on what % will work best.

Topic Closed

This topic has been closed to new replies.

About this Topic