WordPress.org

Ready to get started?Download WordPress

Forums

Responsive div with fixed floater (9 posts)

  1. Jeff F.
    Member
    Posted 7 months ago #

    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.

    http://edalonzo.com

  2. webbrewers
    Member
    Posted 7 months ago #

    If it's the float, add float:none to the media query css for that screen size.

  3. Jeff F.
    Member
    Posted 7 months ago #

    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.

  4. webbrewers
    Member
    Posted 7 months ago #

    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;}
    }
  5. Jeff F.
    Member
    Posted 7 months ago #

    @webbrewers

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

  6. webbrewers
    Member
    Posted 7 months ago #

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

  7. Jeff F.
    Member
    Posted 7 months ago #

    @webbrewers

    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.

  8. webbrewers
    Member
    Posted 7 months ago #

    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.

  9. Jeff F.
    Member
    Posted 7 months ago #

    hmm, thanks. you saved me hours of google. :)

Reply

You must log in to post.

About this Topic