Topic: Two rotating cards in mobile view

Alex Ruttkowski pro asked 7 years ago


Hey guys, I'm currently trying to get two rotating cards to work together. What I'm trying to acomplish is, that for each offered service, there is a short description on the front side and an contact form on the backside. My first problem was, that the form was too big for the card and therefore didn't fit completely on the backside. Overwriting the .card-wrapper .face to
.card-wrapper .face
{
    height: auto;
}
solved the problem. When viewed on a smartphone, both front sides align perfectly (vertically). But if I click on the first card to rotate, it gets covered with the second cards front side and the form can not be submitted. So what I am looking for is some sort of solution, so that when the card gets rotated, the position of the following card gets aligned accordingly. Thanks for the help! Alex

Michal Szymanski staff answered 7 years ago


Jonathan, as you can read in the post above: " we designed rotating card as a container for very simple, basic content (like team member presentation). This card has pretty complicated css constructions and manipulate positions absolute and relative. Changing the height will always cause issues." If you add to much content you will exceed the maximum height of the card. And maximum height is necessary for rotating animations. If you want to include a lot of content - use on of the standard card.

Fitrepreneur pro answered 7 years ago


Michal - I would like to clarify that is is NOT possible to add a list-group to the rotating cards (or at least not one with too many items) JM

Michal Szymanski staff answered 7 years ago


I don't have a good news for you - we designed rotating card as a container for very simple, basic content (like team member presentation). This card has pretty complicated css constructions and manipulate positions absolute and relative. Changing the height will always cause issues. You would have rebuild this card completely. That's way I cannot provide you any ready-to-use solution without fear of further conflicts. I'm sorry.

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags