WordPress.org

Ready to get started?Download WordPress

Forums

Widget with fixed position in responsive layout (4 posts)

  1. sarahjadesigns
    Member
    Posted 9 months ago #

    I'm working on a responsive theme based on Twenty Ten here: http://odin.reaktortest.no/hvorfor-velge-fixit/

    I'd like to get the beige box with contact form in the sidebar to stay fixed (meaning, it follows you as you scroll down the page). I know you can do this by applying position:fixed to the appropriate div, in this case #iwajax_contact_widget-2. When I try to do this though, the div gets re-sized.

    I suspect this might have to do with this being a responsive layout and that the values are defined in percentages, but I'm unable to find a solution for this online.

    Am I doing something wrong? Any insight or suggestions would be greatly appreciated.

  2. sarahjadesigns
    Member
    Posted 9 months ago #

    After a bit more research and trial and error I've figured out the problem, but not the solution. Below is a better explanation of the problem.

    I'm working on a responsive layout and I would like a widget to remain fixed/sticky, meaning it'll follow you as you scroll down the page.

    Simplified HTML:

    <div class="page">
        <div class="content"></div>
        <div class="sidebar">
            <div class="widget1"></div>
            <div class="widget2"></div>
        </div>
    </div>

    CSS:

    .page {
        width:96%;
        max-width:1000px;
        margin:0 auto;
    }
    .content {
        width:65%;
    }
    .sidebar {
        width:28%;
        float:right;
    }
    .widget1 {
        position:fixed;
        padding:7.15%; /* 20px of 280px */
        z-index:10;
    }

    The problem: widget1 gets taken out of the flow by adding position:fixed. This results in the padding percentage being calculated from the body and completely ruining my layout. Because it's removed from the flow, it also no longer takes up 100% width of the sidebar.

    What I need: have widget1 (with a percentage of padding) fit the full width of sidebar.

    The closest solution I've found suggests to add width:inherit on the fixed element. This works great, but only if the parent's width is set in pixels, not in percentage. It also doesn't help with the fact that I need to add padding.

    Any insight or suggestions would be greatly appreciated. I'd prefer a CSS solution, but I'm not against using jQuery.

    If it helps, I'm working on a responsive theme based on Twenty Ten. The site is here: http://odin.reaktortest.no/hvorfor-velge-fixit/
    It's the beige box I'd like to keep fixed (#iwajax_contact_widget-2).

  3. Andrew
    Forum Moderator
    Posted 9 months ago #

    To your first post (haven't read your second sorry) this seems to work for me:

    @media screen and (min-width: 767px) {
     #primary {
      position: fixed;
      right: 0;
     }
    }

    Edit: There's an issue with it not quite overlapping the footer but you can resolve it by adding a z-index to '#primary'.

  4. sarahjadesigns
    Member
    Posted 9 months ago #

    Thanks for the response Andrew. While this solution helps with the positioning of the fixed sidebar, it doesn't solve the problem of the sidebar or widget getting re-sized. The reason this happens is detailed in my 2nd post.

Reply

You must log in to post.

About this Topic