My app was created using Quick flip 2, and I needed to resize it for mobile screens, so I implemented jquery-mobile.
Here is the code snippet:
<!--css-->
<style>
.quickFlip, .quickFlip3 {
height: 350px;
width: 400px;
}
.quickFlip2 {
height: 150px;
width: 40%;
float: left;
margin-right: 9%;
}
/* other irrelevant styles */
</style>
<!--Javascript-->
<!-- JavaScript imports omitted -->
</head>
<body>
<div data-role="page">
<div data-role="main" class="ui-content">
<div class="quickFlip">
<div id="imgContainer" class="blackPanel">
<center><input id="click_flip" type="button" class="quickFlipCta" value="Flip to see the Answer" ></center>
</div>
...
</div>
</div>
</div>
The resizing is not working as expected. What modifications should be made to fix this issue?
The page div is resizing properly, but the QuickFlip div is not responsive.