Community Forums › Forums › Archived Forums › General Discussion › Fixing mobile responsiveness on Lifestyle Pro
Tagged: image gallery, lifestyle Pro, mobile responsive
- This topic has 19 replies, 2 voices, and was last updated 9 years, 9 months ago by mborger.
-
AuthorPosts
-
July 8, 2014 at 5:06 pm #113488mborgerMember
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:
http://bigrockinvestments.com/listings/luxury-condo-sale-nauru-tower-3001/Non-indexed URL with preferred photo at top and larger thumbnails in div-half sections:
http://bigrockinvestments.com/listings/nauru-tower-luxury-condo-sale-2Thank you.
http://bigrockinvestments.com/listings/luxury-condo-sale-nauru-tower-3001/July 8, 2014 at 8:05 pm #113513Matt MizwickiMemberThe 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.July 8, 2014 at 9:35 pm #113520mborgerMemberThanks, 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?
July 8, 2014 at 9:54 pm #113523Matt MizwickiMemberAhhhhh....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?
July 9, 2014 at 1:04 am #113535mborgerMemberDidn'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.
July 9, 2014 at 1:15 pm #113598Matt MizwickiMemberDo 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?
July 9, 2014 at 1:27 pm #113601mborgerMemberThat'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?
July 9, 2014 at 1:33 pm #113603mborgerMemberI flushed the W3TC and MaxCDN, so it should be visible.
July 9, 2014 at 1:38 pm #113604Matt MizwickiMemberAhhh....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.
July 9, 2014 at 1:41 pm #113605mborgerMemberNo change.
July 9, 2014 at 1:47 pm #113610Matt MizwickiMemberOk, 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.
July 9, 2014 at 1:58 pm #113613mborgerMemberSorry, no change. I disabled W3TC completely and flushed the CDN. Same thing. 🙁
July 9, 2014 at 2:00 pm #113614Matt MizwickiMemberOk last change....
.wp-caption { width: 100% !important; }
July 9, 2014 at 2:03 pm #113615mborgerMemberDone - no change, unfortunately.
July 9, 2014 at 2:11 pm #113616Matt MizwickiMemberCould 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-responsiveJuly 9, 2014 at 2:27 pm #113620mborgerMemberDo you see it now?
July 9, 2014 at 2:34 pm #113622Matt MizwickiMemberNo, 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; }
July 9, 2014 at 2:42 pm #113624mborgerMemberYES - 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
July 9, 2014 at 3:02 pm #113628Matt MizwickiMemberWoot! 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
July 9, 2014 at 3:03 pm #113630mborgerMemberGot it. Will do - thanks again. You were super helpful!
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.