Flip cards

Hello,

I have copied over the flip-cards into the website I'm presently working on.
Notice on my test links https://codenyc.net/niles/displays and https://codenyc.net/niles/signage... When page reloads the footer gets pushed down... Then when refresh screen again... it reappears. Do you know what could be causing this? It appears to be misfiring. Perhaps I missed a step in copying everything over? Because when I open the original it works without any problems. Can't seem to wrap my head around this.

I Thank you,
Nina

Hi Thank You for getting back.

I'm not quite sure of what these errors mean or even where to begin to fix?
The font setup is placed with in all of headers in the original templates this way... why would this be defaulting?

However in my attempt, I was trying to include a light box function to the Flip-cards... Is that at all possible?
Because light box uses link... but Flip-cards uses embedded images... Should I use different buttons?

Or better yet: How do I take the original Flip-books and make button active to [View Details] and open up to an image?
The button is presently not functional in flip-cards.html

Hoping to find a solution!

Nina

I'm sorry I'm totally clear on "Just consider fixing the unclosed Tags issue."
What is done to accomplish this?

Does it change from this:

View Details

To this:
href="images/flipcards/displays/1.jpg" data-lightbox="image" class="btn btn-outline-light mt-2">

Right?

Thanks :-)

Hi again,

You know and the strange thing about it... Everything loads fine on mobile...
And on initial load in Chrome and Safari... then on reload... Footer pushes down!

I don't get it???

Wait I think I know what it is...

I have [div class="owl-carousel image-carousel carousel-widget flip-card-wrapper clearfix" data-margin="35" data-nav="true" data-pagi="false" data-items-xs="1" data-items-sm="2" data-items-md="2" data-items-lg="3" data-items-xl="3" style="overflow: visible;"] stacked twice...

What I really wanted to do is create 2 Rows of flip cards - (3) across... What is the best way to stack 2 Rows on top of each other? I tried col and rows doesn't seem to take...

https://codenyc.net/niles/displays

Thanks!
NC

Hi,

I was wondering is there a way to stack Flip-cards?

I presently have this placed twice in page, but not correct. It appears to be causing errors.

[div class=”owl-carousel image-carousel carousel-widget flip-card-wrapper clearfix” data-margin=”35″ data-nav=”true” data-pagi=”false” data-items-xs=”1″ data-items-sm=”2″ data-items-md=”2″ data-items-lg=”3″ data-items-xl=”3″ style=”overflow: visible;”]

What I’m trying to accomplish – is two rows. What do you recommend would work best?
https://codenyc.net/niles/displays

Thank you,
NC

Hi thanks for your answer #2

However #3 this code doesn't seem to be working. Everything is lining up vertically... and not horizontally. Also not holding flip cards original format coding from flip-cards.html. Again... How do I place the (3) items Across -into (2) Rows?

Please see screen shot for example:

Thanks again.
Appreciate it!
NC

After doing some troubleshooting the following I have found in the coding:
Some with semi-colon and others without.

<div class="flip-front dar" style="background-image: url('demos/photography/items/18.jpg')">
<div class="flip-front dar" style="background-image: url('demos/photography/items/2.jpg';)">

Also when two flip-cards from flip-cards.html are together on one page everything works fine... Even when I copied it over to my page. But once they're separated the code for the bottom cards doesn't work properly. The footer pushes down disappearing from page view. But reappears once window is opened or refreshed. It differently has to be something in the coding. Just because everything works fine when they're grouped together. Not sure if it's javascript doing the push-down action to the content-wrap? Not sure, all I know I've been at this for hours...... and exhausted anything here that can be fixed on users end... STUCK!! Would someone be able to take a look at this?

NC

Awww, thank you!! I will give this a try. Looks like this will work

Thank you so much!
Good Night

NC

Yes, thank you... The coding works much better! The footer shifting is still occurring but doesn't seem to be as frequent.
Also there's some missing files for the "multi-row-carousel.html"

Nina

Thank you ? No problem! I’m working off Mac OS 10.13.6; viewing in Chrome 74.0 and Safari 12.11

Btw, I’m thinking this could be the fix for the footer jumping? Check it out.

https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

Not sure ? Probably have to change body class to Page settings. But overall it’s giving the effort I’m looking to accomplish.

Awww, Okay great!!

I had to step away to rest and regroup.... The fix was so obvious :-) Don't know why I missed this one???

Went ahead and assign a fixed height to the content div on just the affected pages with assigned media query:

     @media (min-width: 800px) {
     #content {
     height: 1036px;}
        }

And it worked!! YEAH

This is what happens when missing sleep LOL..
Thanks again so much for all your help.

NC