Two rotating cards in mobile view

Topic: Two rotating cards in mobile view

Alex Ruttkowski pro asked 8 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

Add comment

Michal Szymanski staff answered 7 years ago

0 0 Best answer

Please insert min. 20 characters.

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.

Add comment

Fitrepreneur pro answered 7 years ago

0 0 Best answer

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

Add comment

Michal Szymanski staff answered 8 years ago

0 0 Best answer

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.

Add comment

Write

Create snippet

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

Alex Ruttkowski

Pro User 0Support score
1Questions 0Answers 0Snippets