Responsive div with fixed floater

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;}
}

@webbrewers

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!

@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.

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. ??