Columns in Bootstrap4 housing elements positioned absolutely

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:

https://i.sstatic.net/bXgpi.png

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:

https://i.sstatic.net/WDlj4.png

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.

Answer №1

Bootstrap utilizes a 12-column grid system.

Ensure you are using them correctly.

Your current setup includes:

<div class="col order-1 order-xl-1 col-4 col-xl-2">The two buttons 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 buttons on the right</div>

You should tidy that up!!!

For instance:

  • col followed by col-4 is equivalent to just col-4, as col-4 overrides col.
  • order-1 and order-xl-1 is redundant if there is no order-md-3 (for example). Just use order-1 in this case.

Make sure you properly utilize the 12 grid spaces for these 4 divs.

Concerning the usage of col and col-*, for mobile size, you currently have 24 spaces used out of 12.

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

When col-xl-* applies, you have 10 spaces used out of 12 intentionally.

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

Here is a suggested start:

<div class="col-3 col-xl-2 order-1">The two buttons 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 buttons on the right</div>

This won't change XL size, but it will result in this output (iPhone 6/7/8 mode):

https://i.sstatic.net/Umyfz.png

A good starting point.

The key is to organize classes properly... All the col-* from default to the larger specific size, then the order-* accordingly. This ensures readability of the markup.

;)


EDIT

To make the red cards appear like they are on a separate row:

<div class="col-4 col-xl-2 order-1">The two buttons 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 buttons on the right</div>

Note the changed order and the addition of the .sm-translateUp class which would be:

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

This results in:

https://i.sstatic.net/frmj3.png

Now that certainly looks like a bit of a hack... (LOL) But given that the col is contained within its parent .row, this is the solution for now.

Ensure that class is defined within all necessary @media rules for each Bootstrap breakpoint:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Arranging column contents neatly on small screens

Although there are similar answers available, I want to address those who are trying to prevent their columns from stacking on XS display. Despite having two columns, the content is still stacking at certain displays. This issue is occurring while using B ...

HTML does not support the use of certain symbols

Currently, I am in the process of designing a homepage for my school project. However, I have run into an issue. The content that I want to be displayed on my homepage is as follows: "Daudzspēlētāju tiešsaites lomu spēle (Massively Multiplayer Online ...

the sorting process took a turn for the worse

I am new to XSL. I am attempting to organize a list of books based on the 'number of pages'. I have created a simple XSL file for this purpose, but the output is not as expected. Some elements are sorted while others remain unsorted. What could b ...

Why are the HTML links generated by JS not opening in Chrome?

<a href='http://www.xyz.hu/xyz' alt='Kosár' title='Kosár'>Megtekintés</a> Additionally: - A setInterval function refreshes the sibling's content every second, although it should not affect this specific el ...

Generating HTML widgets dynamically with jQuery: A step-by-step guide

Looking for a way to display an interactive widget on your page while allowing users to generate multiple instances and interact with them simultaneously? Imagine having a widget like this: <div id="my_widget"> <script type="text/javascript" ...

Setting up Jplayer as an audio player: A step-by-step guide

I am looking to incorporate a Jplayer audio player into my project, but I am struggling to find any documentation or resources that provide instructions on what components to include and how to set it up. If anyone has experience with using the Jplayer au ...

Is it possible to use the HTML script tag without specifying the type attribute as JavaScript? <script type="text/html"></script>?

While examining the source code of an HTML page, I stumbled upon the following snippet: <script id="searchItemTemplate" type="text/html"> <# var rows = Math.floor((Model.RecordsPerPage - 1) / 3 + 1); for (var i = 0; i < rows; ++i){ ...

Video HTML autoplay feature malfunctioning

I have been attempting to use the <embed> tag in order to showcase a video on my webpage. However, I have encountered an issue where the video begins playing automatically when the page loads. In an effort to remedy this situation, I included autost ...

Effective techniques for managing PHP forms within HTML and CSS by utilizing checkboxes:

I'm struggling with my code, particularly the form section. Here is the HTML code snippet: <form action="index.php/homepage/deleteSelected" method="POST"> <input type="submit" value="Delete Selected"> ...

Issue with jQuery incorrectly calculating height post-refresh

I am currently utilizing jQuery to vertically center various elements on a webpage. Due to lack of support in older versions of IE, I cannot use the table-cell CSS statement. Therefore, I am using jQuery to calculate half of the height and then position it ...

Which HTML element should be used: section or div?

One of the pages on my website is a profile page which currently looks something like this: <h1>Foo bar profile</h1> <div> <h2>Address</h2> <p>Foo bar street, 55</p> <p>Foo city</p> </div> < ...

Enable row selection in UI-Grid by clicking on a checkbox with AngularJS

I am a newcomer to angular js and I am looking to have the checkbox automatically selected when clicking on a row to edit that specific cell. I have implemented a cell template to display the checkbox in the UI-grid, but now, when I select a row, the row i ...

What are the steps to achieve such a design?

Can you show me how to create a single layout using HTML and CSS? I am struggling with splitting the screen properly. Could you provide a simple example, maybe on jsfiddle? https://i.stack.imgur.com/d2rbn.jpg Thank you in advance! EDIT: I have added a ...

Determine the minimum width in an HTML table's <td> tags

One issue I have encountered is with the columns in my table. I need each column to adjust its width dynamically based on the size of the browser window. However, I also want to ensure that the columns are not too small. To address this, I attempted to se ...

When trying to include an external class that extends Pane in a main class in JavaFX, simply adding it may not achieve the

My primary class is as follows: public class Digital_Analog_Clock_Beta_1 extends Application { @Override public void start(Stage primaryStage) { double outerBoxWidth = 500, outerBoxHeight = outerBoxWidth / 2.5; Rectangle outerB ...

Attempting to bind an input parameter using NgStyle in Angular version 2 and above

Issue: I am in need of a single component (spacer) with a width of 100% and a customizable height that can be specified wherever it is used in the HTML (specifically in home.html for testing): number 1 <spacer height="'200px'"></spa ...

Extract the URL parameter and eliminate all characters following the final forward slash

Here is the URL of my website: example http://mypage.com/en/?site=main. Following this is a combination of JavaScript and PHP code that parses the data on the site. I am now looking for a piece of code that can dynamically change the URL displayed in the ...

No departure animation employed - Polymer

I am working on a project that involves animating a paper-icon-button with spin and opacity effects when hovering over an image using the on-mouseenter and on-mouseleave events. Everything works smoothly when hovering over the image, but I am facing an is ...

Tips for positioning the Google Custom Search bar

I am looking to position the Google custom search box on the left side of my website. Currently, I am using a website builder called imxprs and have implemented this code for my custom search box. <script> (function() { var cx = '013012 ...

Tips for optimizing search functionality in Angular to prevent loading all data at once

An exploration for information within vast datasets is triggered by AngularJS when the input contains more than 3 characters. var app = angular.module('test_table', []); app.controller('main_control',function($scope, $http){ $scope ...