Bootstrap4 columns containing absolutely positioned elements

Question

I have been working on a game and, for certain things, I used absolute positioning. In particular, I need it for some moving animations where I have to slide elements around and overlap them to create an effect.

I'm trying to work on making the game good-looking on mobile, and I've been running into some problems caused by Bootstrap columns that contain those absolutely positioned elements.

This is the look I'm trying to get (aside from the badly aligned number), notice the red squared row in the middle:

The whole center part of the screen (the row with buttons, emojis, and the centered card icon underneath) is a row containing cols. This is some of its 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>

The img that has id hidden_card is a card to the left of the red one that is made visible and slides to the right to cover that (it uses jQuery animate to manipulate the position). On top of stacked_card, which is the main red card that's displayed in the screenshots, there's another copy of it, that is flipped with jQuery and moved to the right to overlap hidden_uncovered_card. This is pretty much how the animations work. They all depend on using position: absolute and manipulating the positioning.

For some reason, the actual look I'm getting with the above code is this:

There is some space in between the three columns on the top and the one containing the red card back, and I don't understand where it is coming from. Removing all the position: absolute seems to fix this, but of course, then all the animations that depend on it stop working.

Is there any way to fix this positioning without removing the position: absolute? It'd be a pain to have to rewrite the code for all the animations, as it's working perfectly on desktop.

Here's a static webpage that contains the markup. You can turn it to mobile view (the screenshots were taken as iPhone 6/7/8 mode) and see for yourself.

click

The actual app (a beta version, that is) can be found here, in case you wanted to see how the animations work. If you need any additional information, just let me know.

Answer 1

Bootstrap is using a 12 colums grid.

Check how you use them.

You have:

<div class="col order-1 order-xl-1 col-4 col-xl-2">The two button on the left<div>
<div class="reaction_box order-2 order-xl-2 col col-4 col-xl-2">the emojis</div>
<div class="col order-5 order-xl-3 col-12 col-xl-3">the red cards</div>
<div class="col col-4 order-3 order-xl-4 col-xl-3">the three button on the right</div>

You should clean that!!!

Example:

• col followed by col-4 is the same as just col-4 where col-4 overrides col.
• order-1 and order-xl-1 is redondant if there is no order-md-3 (for example)
  Just order-1 is enought here.

For these 4 divs, make sure you use the 12 grid spaces correctly.

So about the col and col-* usage, for mobile size, you actually have 24 spaces used out of 12.

1. 4 spaces
2. 4 spaces
3. 12 spaces
4. 4 spaces

And whent the col-xl-* applies, you have 10 spaces used out of 12. Is that on purpose?

1. 2 spaces
2. 2 spaces
3. 3 spaces
4. 3 spaces

---

So here is what I suggest for a start:

<div class="col-3 col-xl-2 order-1">The two button on the left<div>
<div class="reaction_box col-4 col-xl-2 order-2">the emojis</div>
<div class="col-2 col-xl-3 order-3">the red cards</div>
<div class="col-3 order-4">the three button on the right</div>

which doesn't change the xl size at all, but produces this (iphone 6/7/8 mode):

That's a start.

So the trick is to have the classe in order... All the col-* from default to the bigger specific size... And then the order-* in order too. That make the markup readable.

;)

---

EDIT

To have the red cards looking like on another row :

<div class="col-4 col-xl-2 order-1">The two button on the left<div>
<div class="reaction_box col-4 col-xl-2 order-2">the emojis</div>
<div class="col-10 col-xl-3 order-4 order-xl-3 sm-translateUp">the red cards</div>
<div class="col-4 order-3 order-xl-4">the three button on the right</div>

Notice the order changed and that there is an additional .sm-translateUp class which would be:

@media screen and (max-width: 576px){
  .sm-translateUp{
     transform: translateY(-85px);
  }
}

That makes:

Now that really looks like a hack... (LOL) But since that col is trapped inside its parent .row, that is all I think of for the moment.

So have that class defined inside all necessary @media rules for each bootstrap break points:

• sm: >= 576px
• md: >= 768px
• lg: >= 992px
• xl: >= 1200px