Home › Forums › Pro Version › Masonry not working properly in Safari
- This topic has 8 replies, 2 voices, and was last updated 6 years, 8 months ago by
Masonry Guy.
-
AuthorPosts
-
May 11, 2016 at 3:47 am #11866
Craig Rogers
ParticipantHi,
I’ve got a situation where I’m putting ads (placehold.it image for now) in with content which we are pulling in from several social media sites. We’re using a custom loop in layout.php like this:
<?php if ($thepostcount % 6 == 0) { ?> <div class="wmle_item_holder <?php echo $shortcodeData['wmlo_columns'] ?>" style="display:none;"> <div class="wmle_item"> <div class="ads"> <?php include ('ads.php'); ?> </div> </div><!-- wmle_item --> </div><!-- EOF wmle_item_holder --> <?php }; ?>
It works fine in all browsers in full width windows. But in Safari in 1 column screens beyond the first instance of the ad when the infinite scroll loads more items, the layout does not respect the height of the ad and gets overlaid by the next item. Example (the gray box is the placeholder image):
The site is http://rentedlifestyle.z.pressplatform.com
Can you suggest what might be causing this issue?
Thank you!May 11, 2016 at 3:49 am #11867Craig Rogers
ParticipantPS: The include is simply a call to the placeholder image
<img src="http://placehold.it/350x250" />
May 11, 2016 at 1:39 pm #11882Masonry Guy
KeymasterHi Craig,
To check this in more details, can you please send me your site url where you have setup this ?
Thanks
May 11, 2016 at 3:11 pm #11883Craig Rogers
ParticipantThank you for looking into this! The site is http://rentedlifestyle.z.pressplatform.com
May 12, 2016 at 3:18 am #11893Masonry Guy
KeymasterHi Craig,
I am sorry but i don’t see such issue here mobile/desktop safari. I can see banner like this https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97250&w=350&h=250 and they looks good to me.
Thanks
May 12, 2016 at 3:41 am #11894Craig Rogers
ParticipantHi MG,
Thank you for your reply. The first banner always displays correctly. The problem occurs when you scroll past the first infinity scroll screen. Are you not seeing the issue there? The image below is a screenshot from the second “set” of posts – about the 18th post. My guess is masonry/imagesloaded is not calculating the absolute position correctly, because it’s not reading that image’s height dimensions before rendering the layout. I just don’t know why that would be happening in this case. Any guidance you can give will be appreciated.
Thank you!
May 12, 2016 at 12:38 pm #11907Masonry Guy
KeymasterHi Craig,
Ya. I am still unable to replicate this issue here. It all looks good to me.
Can you please let me know your OS, device and browser version ?
Thanks
May 13, 2016 at 12:58 am #11914Craig Rogers
ParticipantThanks for helping out!
Just to follow up for anyone else who might have this issue, I resolved it by putting the ad container dimensions inline in layout.php so masonry could read them with each new page render. This was the HTML that worked:
<div class="wmle_item_holder <?php echo $shortcodeData['wmlo_columns'] ?>" style="display:none;"> <div class="wmle_item"> <div class="ads" style="width:100%; max-width:320px; height:250px;; margin: 0 auto 20px; padding: 10px; text-align: center;"> <?php include ('ads.php'); ?> </div><!-- ads --> </div><!-- wmle_item --> </div><!-- EOF wmle_item_holder -->
I added this to the theme style.css to make the images responsive:
.ads img { width: 100%; height: auto; }
May 13, 2016 at 4:26 pm #11923Masonry Guy
KeymasterHi Craig,
Sorry that i couldn’t replicate that issue here. So glad that you found the solution and thank you so much for posting it here.
I really appreciate your time and effort here.
Thanks
-
AuthorPosts
- The forum ‘Pro Version’ is closed to new topics and replies.