How to make listing page responsive

[mborger]

Hello. I'm trying to figure out how to make my listing page (AgentPress) responsive. Viewing it on my iPhone 5s, only the left half of the screen shows:

Pearl City Townhouse – 4BR Renovated!

I don't have this problem with other posts or pages, so it may be a simple edit to the css. Ideally, I'd like any edits to be in force for all pages of this type, not just this one in particular.

Any ideas? Thanks in advance.

http://bigrockinvestments.com/listings/pearl-city-townhouse-4br-renovated/

[nutsandbolts]

The issue there appears to be the Flash gallery and not the Lifestyle Pro theme or the AgentPress Listings plugin. The iframe has a fixed width and height, so it won't resize appropriately for mobile (nor will it display consistently on iPhones and iPads). There are a number of HTML5 gallery plugins out there - Envira Gallery is my personal favorite - that would allow your listings pages to maintain responsiveness. Hope that helps!

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[mborger]

Thanks - good catch on the fixed widths. That's a slideshow that my photographer hosts on his site (the hirephoto.com/.... )and I was trying to embed it to keep visitors on my site instead of linking out. When I tried using width and/or height=100% in the iframe, I would only get full width, never more than half height. So that's when I went to fixed width/height. I don't own the slideshow itself, so my options to embed may be limited.

[mborger]

I ended up just making it an ahref link for now but it didn't change anything - it's still only showing half the page. Any ideas? Thank you.

Ok so after more research, it turns out the problem was actually the image inserted into the upper right of the body -- once I removed that, the page adjusted just fine. So now I'm back to wondering how I can bring back the slideshow, either as an iframe or otherwise, and have it resized automatically per the viewing device.

Right now it's ok on desktop but doesn't show well on iPhone.

Dev page: http://bigrockinvestments.com/listings/pearl-city-townhouse-4br-renovated-2/

slideshow to be imported: http://www.hirephoto.com/haleola26b/slideshow

Thank you.

[Author]

Posts