Photo jumping

Hi Team,

Have another one for you...

1. I have replaced top slider to (static photo). However I'm noticing the photo jumps on window resizing.
   Which I believe leads to the next issue.

When viewing on iPad - portrait, rotate to landscape then back to portrait... The screen blanks out and the footer misfires...with a whitespace at the bottom. I'm actually thinking it's being cause by the same photo jumping.Is there a code I can include like (top:0?) to the photo slider?

https://codenyc.net/JAJ/the-avenue-item.html

1. The tables are placed within (entry post class) is not taking very well. How can I achieve same 3 grid layout with tables without using entry post class? This too caused footer misfiring. Because once I removed this section, it stopped.

Thanks again,
NC

Hello,

Sure thing, thank you.

1. The desktop jump occurs when resizing window. Operating System: MacOS Sierra 10.13.6, Chrome
2. Attached are screen shots for iPad... mobile 1 - is initial portrait view, mobile 2 - happens upon rotating to landscape. Then again, mobile 3 - is initial portrait view, mobile 4 - happens upon rotating to landscape. NOTE: You must view on iPad and scroll all the way down to footer when rotating. The whitespace initially appears but snaps back into place.

Okay, Thanks!
NC

Hi wasn't allowed to add these additions in original post.

Thank you
NC

Hello,

I've done the above as suggested but didn't fix it. Picture and page still jumping on iPad. :-(
Could the code not be set correctly? Again, Are settings correct for section photo? Please see #1 ...and does tables work inside [post-grid and entry-content] class - #2? Since these two areas - is what appears to be where the issue is occurring.

1. Picture Section:
   <div class="section py-0 my-0" style="background: url('images/single/avenue.jpg') center center; background-size: cover;" data-height-xl="600" data-height-lg="600" data-height-md="450" data-height-sm="350" data-height-xs="250" >
   <div class="container clearfix"></div>
   </div>

2. Table:
   <div id="posts" class="post-grid grid-container grid-3 clearfix" data-layout="fitRows">

<div class="entry clearfix">
<div class="entry-image">

</div>

<div class="entry-title">
<h2>Diagram 1</h2>
</div>

<div class="entry-content">
<table class="table">
<tbody>
<tr>
<td class="notopborder">**Dimensions: **</td>
<td class="notopborder">36"H, 30"W, 28"D</td>
</tr>
<tr>
<td class="notopborder">Seat Height:</td>
<td class="notopborder">18.50"</td>
</tr>
<tr>
<td class="notopborder">Seat Depth:</td>
<td class="notopborder">19.00"</td>
</tr>
<tr>
<td>COM:</td>
<td>1.75 Yards (54" plain material - no repeats)</td>
</tr>
<tr>
<td>COL:</td>
<td>32 Square Feet </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

Thanks again for your help.
NC

Okay, I just discovered it’s only happening in Safari on iPad rotate. In Chrome everything works fine. Hopefully this makes better sense to narrow down.

NC

Hi there,

Is there another setting needed for Safari? I never heard back.

Thank you,
NC

Hello I have updated to hero slider as suggested.

However, still having issue with page load on landscape rotate.
I do have a video showing exactly what’s happening. Do you have a way from me to forward video clip?

This is very frustrating...

Do you accept video clips?

Hello,

The reason I’m even more perplexed ?...

When viewing on iPad mini in Chrome everything’s fine. The blank-out is only occurring in Safari. If I recall, I don’t think Android tablet is having this issue. I originally thought it was photo jumping... Not sure now!!!! :-(

Also, on other pages (e.g.) https://codenyc.net/JAJ/x-table-item.html works fine... the only difference is that the Main photo and left side tables are removed... It’s crazy!!

But here’s the video... Viewing on iPad OS 13.2.3
https://www.dropbox.com/s/ah2y3byriezeoff/IMG_0766.MOV?dl=0
From page - https://codenyc.net/JAJ/broadway-item.html

Make sure scroll all the way to the bottom on portrait view, then rotate to landscape view... White screen occurs and the menubar freezes (becomes non responsive). When touch the screen the page then appears.

Thank you very much!
NC

Excuse me, I stand corrected... behavior is also occurring on iPhone 7 Plus - Safari.
It appears to be a Safari issue.

I think I got it!!! ?
Had to assign max-height to #wrapper div by targeting specified media query...

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
#wrapper {
overflow: hidden;
max-height: 3396.94px;
bottom: 0;
}
}

I just have to keep position sticking to the bottom. There's now, a white space appearing at bottom on landscape - I believe [bottom: 0] might fix it, will see!!! Yeah!! :-)

NC

Hi,

One last thing I realized. Fixed height is not good. Because each page height varies. Is there a way to keep height automatically at 100% (responsive)?

LIKE?

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
#wrapper {
overflow-x: hidden;
position: relative;
max-height: 100%; or min-height: 100vh;
bottom: 0;
}
}

Think this would work? Would love your opinion.

Thank you,
NC

Hi,

Okay thank you!

Have been working in the background... so old link might not show correctly. Here’s another page link:

https://codenyc.net/JAJ/hudson-item.html

Note: How it now appears to be working properly. Don’t know what happened? Other then editing code, but then resetting it back to its original settings.? Is it working for you too? Absolutely crazy!!

https://www.dropbox.com/s/8sqljnogtmgyxdv/IMG_0854.MOV?dl=0

NC

Hello,

Yes. Everything is working fine now.

Through troubleshooting because of the many coding changes made I had to apply the following combinations together:

1. Reverted back to original coding - SEMICOLON.documentOnResize > init: function() Function Block in the js/functions.js File.
2. After reverting back #1 Applied Slider Update to .hero-section and removing the data-height
3. Reset Safari settings on iPad - Request Desktop Website

It's good!!
Thanks for checking,
NC