Fixing mobile responsiveness on Lifestyle Pro

[mborger]

Hello. I created a new listing using AgentPress Listings for my Lifestyle Pro site. I found that the listing page as originally designed, with a large photo and div-half sections, was making the page not mobile responsiveness, i.e. only the left half of the content would show in my iPhone.

When I removed the large photo and the div-half sections, the site became responsive. The div sections were used to give me larger thumbnails than the native WP gallery I ended up having to resort to make this work.

I'm wondering:
1) Is there a way keep a large photo at the top which will look great on desktops but resize accordingly as needed on smaller screens and mobile devices?
2) Is there a better option for my gallery than the native WP gallery that will still be mobile responsive and allow for larger thumbnails? The current method is just not attractive.

Current URL with no photo at top and native WP gallery:

Nauru Tower Luxury Condo for Sale

Non-indexed URL with preferred photo at top and larger thumbnails in div-half sections:
http://bigrockinvestments.com/listings/nauru-tower-luxury-condo-sale-2

Thank you.

http://bigrockinvestments.com/listings/luxury-condo-sale-nauru-tower-3001/

[Matt Mizwicki]

The issue is with the div that the image is located in. The width is being set to 1034 pixels by a style tag.

<div id="attachment_8242" style="width: 1034px" class="wp-caption aligncenter">
<img class="size-large wp-image-8242" src="http://netdna.bigrockinvestments.com/wp-content/uploads/2014/07/Luxury-condo-Honolulu-Nauru-Tower-3001-living-room1-1024x768.jpg?c1fc04" alt="Luxury condo Honolulu - Nauru Tower 3001 - living room1" width="1024" height="768">
<p class="wp-caption-text">Living room with custom flooring</p>
</div>

Remove style="width: 1034px" from the div and it should work perfect.

[mborger]

Thanks, Matt. That div block seems to be generated and not part of the actual page code. Here's the block of code that pertains:

[caption id="attachment_8242" align="aligncenter" width="1024"]<img src="http://bigrockinvestments.com/wp-content/uploads/2014/07/Luxury-condo-Honolulu-Nauru-Tower-3001-living-room1-1024x768.jpg" alt="Luxury condo Honolulu - Nauru Tower 3001 - living room1" width="1024" height="768" /> Living room with custom flooring[/caption]

So it does appear that the pixel sizes are set, which comes from when I picked "Large" as the size from the drop-down box. What should I replace this with?

[Matt Mizwicki]

Ahhhhh....i see. Well in that case, let's try adding this near the bottom of your css file (just above the mobile responsive stuff)...

.listing .wp-caption {
width: 100% !important;
}

That may also effect the listing images near the bottom of the listing too though. Do you mind trying it out to see?

[mborger]

Didn't work. I think that code takes care of the caption, but the width and height in the code are still 1024 and 768. I tried setting both at 100% but no change.

[Matt Mizwicki]

Do you mind adding

.listing .wp-caption {
width: 100% !important;
}

back to you styles.css and let me take a look while it's there so i can see what's going on?

[mborger]

That's what you included in your last post. It's already at the bottom of my style.css before the Media Queries section. Do you not see it?

[mborger]

I flushed the W3TC and MaxCDN, so it should be visible.

[Matt Mizwicki]

Ahhh....i gave you the wrong code sorry.

Change what i just sent to this...

.single-listing .wp-caption {
width: 100% !important;
}

And then, yes, flush the W3TC and MaxCDN again.

[mborger]

No change.

[Matt Mizwicki]

Ok, here's the last one i can think of.

Remove the code i previously sent completely.

Then replace lines #292 to #299

embed,
iframe,
img,
object,
video,
.wp-caption {
	max-width: 100%;
}

with this code...

embed,
iframe,
img,
object,
video {
	max-width: 100%;
}

.wp-caption {
	width: 100%;
}

Then clear the cache.

[mborger]

Sorry, no change. I disabled W3TC completely and flushed the CDN. Same thing. 🙁

[Matt Mizwicki]

Ok last change....

.wp-caption {
width: 100% !important;
}

[mborger]

Done - no change, unfortunately.

[Matt Mizwicki]

Could you clear your server cache again? Because i've tried refreshing and clearing my browser cache and the !important; declaration isn't showing up. I think something else may be caching your stylesheet.

And i just did some further searching so maybe these resources may point you in the right direction...
http://wordpress.org/support/topic/captions-break-image-fluidity-in-responsive-themes-on-mobile-phones
http://wordpress.stackexchange.com/questions/107358/make-wordpress-image-captions-responsive

[mborger]

Do you see it now?

[Matt Mizwicki]

No, it's still not showing up. I've tried clearing browser cache, incognito mode on chrome, and my mobile device.

I think something on the server is still caching the stylesheet.

When i edit the stylesheet directly with Google Developer Tools, it fixes the issue immediately when i add the !important.

.wp-caption {
width: 100% !important;
}

[mborger]

YES - that works. I had mistakenly thought you were referring to putting back in the original code above the media query section. That's in and it works - thanks!

I was going to ask this in a separate thread, but let me throw this out there because it's regarding the same post. How best to embed this slideshow on the same listing page for both desktop and mobile? I tried it previously and couldn't get the frames and what not to appear: http://www.hirephoto.com/naurutower3001/slideshow

[Matt Mizwicki]

Woot! Glad i could help.

Now that it's working, you may want to experiment with putting the code in one of the media queries. That way, the desktop css will be back to the original, and the mobile css will only be used on smaller screens. But if it doesn't seem to be messing anything else up then you can leave it.

I don't see an "embed slideshow" option on your slideshow settings unfortunately. May want to add an additional post here, because it's out of my range of expertise. I don't think iframes would be a route i'd go, but someone else may disagree.

And, If you're ever in Kona get in touch!

-matt

[mborger]

Got it. Will do - thanks again. You were super helpful!

[Author]

Posts