Recently, I've been developing a game that involves using absolute positioning for certain elements. This is necessary for creating moving animations where elements need to slide around and overlap to achieve a specific effect.
As I focus on optimizing the game's appearance for mobile devices, I encountered some challenges related to Bootstrap columns that contain these absolutely positioned elements.
Check out the desired look of the game (ignoring the number alignment issue), particularly focusing on the red square row in the middle:
The central section of the screen, featuring buttons, emojis, and a centered card icon below, is implemented using rows and columns in the following markup:
<div class="col order-1 order-xl-1 col-4 col-xl-2">
<div style="display:inline-block">
<p class="backgrounded-text" style="white-space: nowrap; text-overflow: ellipsis;"><span id="turn_elem">...</span></span></p>
<p class="backgrounded-text">Carta attuale: <span id="curr_card"><img class="card_icon" /></span></p>
</div>
</div>
<div class="reaction_box order-2 order-xl-2 col col-4 col-xl-2">
<span style="padding-left:5px!important;padding-right:5px!important" class="reaction_title">Reazioni:</span>
<table>
<!-- emojis ... -->
</table>
</div>
<div class="col order-5 order-xl-3 col-12 col-xl-3">
<span>...</span><br />
<span id="hidden_card">
<img class="card_placeholder" src="..." />
</span>
<span id="card_stack" class="slide_to_right">
<img class="card_placeholder" src="..." />
</span>
<div id="stacked_card">
<img id="stacked_front" class="card_placeholder" src="..." />
</div>
<div id="hidden_uncovered_card_div">
<img id="hidden_uncovered_card" class="card_placeholder" src="..." />
</div>
</div>
<div class="col col-4 order-3 order-xl-4 col-xl-3">
<button style="width: 49%" class="btn btn-lg btn-dark" id="doubt" @click="doubt()" :disabled="playing_animation">Dubito!</button>
<button style="width: 49%" class="btn btn-lg btn-dark">
Metti giù
</button>
</div>
</div>
An interesting aspect of the animations is how the position: absolute property allows manipulation of element positions. For example, the hidden_card image initially hidden to the left of the red card then moves rightward to cover it through jQuery's animate function. Additionally, the main red card (stacked_card) has a duplicate version flipped horizontally with jQuery, sliding to the right to overlap the hidden_uncovered_card. Such animations heavily rely on precise positioning achieved through position: absolute.
However, an issue arises as shown in the current display outcome:
In this rendering, there appears to be unwanted spacing between the top three columns and the one containing the red card back. Although removing position: absolute resolves this spacing problem, doing so disrupts all dependent animations.
Is there a solution to rectify this layout issue without eliminating the position: absolute property? Rewriting the animation code from scratch would be inconvenient, especially considering its flawless functionality on desktop platforms.
To explore further and experience the page's responsiveness firsthand, visit the static webpage available for viewing on mobile devices here.
For a live demonstration of the application (beta version), navigate to the following link here. Feel free to reach out if you require additional details or clarifications regarding the implementation.