Rotating Cards with Cascading Cards

Topic: Rotating Cards with Cascading Cards

pro asked 7 years ago

I am trying to use rotating cards and cascading cards together but rotating cards have a built in size of 500px. Even if you match up the general size of the content on each and it looks good at one break point, it will resize not work at other breakpoints. How can I implement this?

Add comment

xardonik answered 7 years ago

0 0 Best answer

I don't know if I understand you want use both cards types and have the same height od both? Can you attach any example of your code?

Add comment

pro answered 7 years ago

0 0 Best answer

I want the heigh to be dynamic based on the content. The rotating cards have a 500px height built into them, this makes it so that if you use the cascade styling with the rotating and you have them in 2 cols next to each other that then stack as col-xs they overlap.


    <section id="products" class="text-center wow bounceIn" data-wow-delay="0.2s">
            <!--Card 1-->
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                    <div class="card-wrapper">
                        <div id="card-1" class="card-rotating effect__click">

                            <!--Front Side-->
                            <div class="face front" >
                                <div class="card card-cascade narrower" >

                                    <!--Card image-->
                                    <div class="view overlay hm-white-slight ">
                                        <img src="./img/image.jpg" class="img-fluid" alt="">
                                        <a>
                                            <div class="mask waves-effect waves-light"></div>
                                        </a>
                                    </div>
                                    <!--/.Card image-->

                                    <!--Card content-->
                                    <div class="card-block">
                                        <h5 class="red-text"><i class="fa fa-line-chart"></i> Classic</h5>
                                        <!--Title-->
                                        <h4 class="card-title">Learn </h4>
                                        <!--Text-->
                                        <p class="card-text">Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.</p>
                                        <div class="smooth-scroll ">
                                            <a class="btn btn-primary rotate-btn  " data-card="card-1">Quick Facts</a>
                                            <a href="#pop"  class=" btn btn-primary" data-offset="200">More Information</a>
                                        </div>
                                        <!-- <a class="rotate-btn" data-card="card-1"><i class="fa fa-repeat"></i> Click here to rotate</a> -->

                                    </div>

                                </div>

                            </div>
                            <!--/.Front Side-->
                            <!--Back Side-->

                            <!--Back Side-->
                            <div class="face back">
                                <div class="card" style="height: inherit;">
                                    <ul style="padding: 20px">
                                        <li style="padding-bottom:15px"> Chocolate cake cake jelly beans topping jujubes lollipop fruitcake tart carrot cake. Chocolate cake marshmallow liquorice. Marzipan halvah donut. </li>
                                        <li style="padding-bottom:15px"> Muffin caramels jelly beans chocolate soufflé. Cake marzipan carrot cake bear claw cookie. Gummies gummies chocolate sweet chocolate biscuit cupcake tootsie roll fruitcake. </li>
                                        <li style="padding-bottom:15px"> Fruitcake chocolate bonbon caramels apple pie powder toffee topping. Bonbon toffee jelly-o. Ice cream cotton candy pudding powder jelly-o.</li>

                                    </ul>

                                    <a class="rotate-btn" data-card="card-1"><i class="fa fa-undo"></i> Click here to rotate back</a>
                                </div>
                            </div>
                            <!--/.Back Side-->
                            <!--/.Back Side-->

                            <!--/.Card content-->
                        </div>
                    </div>
                </div>
                <!--/.Card 1-->

                <!--Card 2-->

                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                    <div class="card-wrapper">
                        <div id="card-2" class="card-rotating effect__click">

                            <!--Front Side-->
                            <div class="face front">
                                <div class="card card-cascade narrower">

                                    <!--Card image-->
                                    <div class="view overlay hm-white-slight ">
                                        <img src="./img/image2.jpg" class="img-fluid" alt="">
                                        <a>
                                            <div class="mask waves-effect waves-light"></div>
                                        </a>
                                    </div>
                                    <!--/.Card image-->

                                    <!--Card content-->
                                    <div class="card-block">
                                        <h5 class="red-text"><i class="fa fa-pie-chart"></i> Feature Rich Platform</h5>
                                        <!--Title-->
                                        <h4 class="card-title">Learn <b><i>Everything </b></i>About </h4>
                                        <!--Text-->
                                        <p class="card-text">Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.</p>
                                        <div class="smooth-scroll ">
                                            <a class="btn btn-primary rotate-btn" data-card="card-2">Quick Facts</a>
                                            <a href="#cax" class="btn btn-primary" data-offset="200">More Information</a>
                                        </div>

                                    </div>

                                </div>

                            </div>
                            <!--/.Front Side-->

                            <!--Back Side-->
                            <div class="face back"  >
                                <div class="card" style="height: inherit">
                                    <ul style="padding: 20px">
                                        <li style="padding-bottom:15px"> Muffin caramels jelly beans chocolate soufflé. Cake marzipan carrot cake bear claw cookie. Gummies gummies chocolate sweet chocolate biscuit cupcake tootsie roll fruitcake. </li>
                                        <li style="padding-bottom:15px"> Fruitcake chocolate bonbon caramels apple pie powder toffee topping. Bonbon toffee jelly-o. Ice cream cotton candy pudding powder jelly-o.</li>
                                        <li style="padding-bottom:15px"> Dessert soufflé sesame snaps croissant sweet roll. Lemon drops fruitcake dessert gummi bears brownie powder sesame snaps topping chocolate bar. </li>

                                    </ul>

                                    <a class="rotate-btn" data-card="card-2"><i class="fa fa-undo"></i> Click here to rotate back</a>
                                </div>
                            </div>
                            <!--/.Back Side-->

                            <!--/.Card content-->
                        </div>
                    </div>
                </div>
                <!--Card 2-->
            </div>

        </section>

Add comment

xardonik answered 7 years ago

0 0 Best answer

Hmm in my opinion is really hard to do that. I can't find good answer in css. MDB set static height because front side and back side is positioning by posiiton:absolute and if you unchecked heght in developer console you only set part of card. Maybe you will need to use jquery and check height of front side and back side and set it to #card-1 and #card-2.

Add comment

Rafał Rogulski answered 7 years ago

0 0 Best answer

Hi oftumkor, You can set your own media queries, by adding the code below to your CSS file.

@media screen and (max-width: 1200px) {
  .card-wrapper {
    height: 800px;
  }
}

this code will work only when page width from 1px to 1200px because now you don't have any other queries for smaller resolution, you can also change max-with to min-width wich will work only when page width is 1200px or higher. Regards

Add comment

xardonik answered 7 years ago

0 0 Best answer

I can only suggest for MDB developers that you can remove position:absolute from css for rotating cards and add script that check which one of face has smaller height and set position:absolute to this element and it works fine without static height on main div. If you are interested in this solution write to me I can explain more. ;)

Add comment

Bartłomiej Malanowski staff pro premium answered 7 years ago