Menu icon Foundation
XY Grid Source Ordering

Hello,

One of my cells has lots of photos.  The browser is rendering this cell first.  At the medium screen size, the page corrects itself as soon as the source ordering rules are fully loaded and applied.  This causes a horizontal shift during page load, which is distracting and annoying. 

<div class="grid-x">
<div class="medium-6 medium-order-2 cell">photos</div>
<div class="medium-3 medium-order-1 cell">vertical menu</div>
<div class="medium-3 medium-order-3 cell">some more content</div>
</div>

I duplicated the photos cell and used Visibility Classes to show and hide the cell so that it would render nicely.  This worked!

<div class="grid-x">
<div class="show-for-small-only cell">photos</div>
<div class="medium-3 cell">vertical menu</div>
<div class="hide-for-small-only medium-6 cell">photos</div>
<div class="medium-3 cell">some more content</div>
</div>

However, it created a new problem.  The photo cell uses several div ids, which are tied to javascript and styling on the page.  Now, I have multiple IDs in the DOM with the same name.

Am I missing something?  Is there an easier way to stop horizontal shifting on browser page load?

As I recall, the Float Grid with Push and Pull did not have this problem.  I assume Flexbox at the grid level is the culprit? 

Any ideas?  Thank you. 

 

 

 

 

xy gridsource orderingflexboxBrowser RenderingHorizontal Shiftingvisibility classes

Hello,

One of my cells has lots of photos.  The browser is rendering this cell first.  At the medium screen size, the page corrects itself as soon as the source ordering rules are fully loaded and applied.  This causes a horizontal shift during page load, which is distracting and annoying. 

<div class="grid-x">
<div class="medium-6 medium-order-2 cell">photos</div>
<div class="medium-3 medium-order-1 cell">vertical menu</div>
<div class="medium-3 medium-order-3 cell">some more content</div>
</div>

I duplicated the photos cell and used Visibility Classes to show and hide the cell so that it would render nicely.  This worked!

<div class="grid-x">
<div class="show-for-small-only cell">photos</div>
<div class="medium-3 cell">vertical menu</div>
<div class="hide-for-small-only medium-6 cell">photos</div>
<div class="medium-3 cell">some more content</div>
</div>

However, it created a new problem.  The photo cell uses several div ids, which are tied to javascript and styling on the page.  Now, I have multiple IDs in the DOM with the same name.

Am I missing something?  Is there an easier way to stop horizontal shifting on browser page load?

As I recall, the Float Grid with Push and Pull did not have this problem.  I assume Flexbox at the grid level is the culprit? 

Any ideas?  Thank you.