Support » Fixing WordPress » Responsive div with fixed floater

  • Hello WP

    I’ve got one that’s making my brain hurt and it’s probably easy. I have a navigation I want to leave a fixed size on the left and have the primary content keep squeezing down.

    I set the primary at 70% but then at pad size it kicks down below the other div because of the float. If I use max-width I can’t get it to expand on larger screens. Is there a responsive way I”m missing?

    This is the site if anyone can help.

Viewing 8 replies - 1 through 8 (of 8 total)
  • If it’s the float, add float:none to the media query css for that screen size.

    Hey @webbrewers

    I want it to float. I’m trying to figure out if that div can stay in that position to the right of the other div and still resize all the way down while the menu remains the same size.

    So for ipads, you need to calculate how wide it can be allowing for the sidebar. It drops down because there isn’t enough space for the width you have defined. My guess would be somewhere around 400-420px. To target tablets with screens larger than 720px but not desktops, try something like:

    /*Define target screen width*/
    @media (min-width: 720px) and (max-width: 1024px){
    .elementclass or #id{width:420px;}


    Thank you so much, had a little emergency so sorry for not getting back to you sooner.

    I was off – it looks like it needs to be something like 380px wide!


    It’s working for my on my iPad. I made it two different sizes for the portrait and landscape views.

    Now I need to figure out why iPads don’t do fixed background where that content scrolls like on the laptop or desktop, if you know any tutorials.

    Ios doesn’t support fixed background images. A possible workaround is to add an element with an image position:fixed and prioritize the layers of the content you want visible above it (for small screens only)….but that could get complicated.

    hmm, thanks. you saved me hours of google. 🙂

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Responsive div with fixed floater’ is closed to new replies.