1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Two rotating cards in mobile view

Alex Ruttkowski pro asked 6 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 6 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 6 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 6 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.
Write
Create snippet
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
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
About author
Alex Ruttkowski
Pro User 0Support score
1Questions 0Answers 0Snippets