Flexbox implemented for responsive Three Column Layout

Recently, I set up a small poll with three layout columns. On Desktop, everything looks great but the problem arises when viewing it on a mobile screen. People are displayed one under the other followed by the questions. I want to rearrange it so that each person is accompanied by their respective set of questions in a more organized manner like this:

Does anyone have any suggestions on how to solve this issue?

Here is the HTML code snippet:

<div class="col-md-12 col-xs-12">
    <div class="d-table">
        ...
    </div>
</div>

And here is some accompanying CSS:

.d-table {
    display: table!important;
}
.d-table-row {
    display: table-row !important;
}
...
.answerText {
    margin-left: 0.375rem;
}
javascripthtmlcssbootstrap-4flexbox

Answer №1

Have you given this a shot?

<div class="col-md-12 col-xs-12">
    <div class="d-table">
        <div class="d-table-row">
            <div class="d-table-cell align-middle">This question seems intriguing</div>
            <div class="d-table-cell align-middle">
                <div class="titleMiddle">Person 1</div>
                    <div class="d-table-cell align-middle pb-4">
                    <div class="horizontal">
                        <div class="answer answerRight">
                            <div class="answerInput">

                            <input type="radio" name="name" value="1">
                        </div>
                        <div class="answerText">1</div>
                    </div>
                    <div class="answer answerRight">
                        <div class="answerInput">
                            <input type="radio" name="name" value="2">
                        </div>
                        <div class="answerText">2</div>
                    </div>
                    <div class="answer answerRight">
                        <div class="answerInput">

                            <input type="radio" name="name" value="3">
                        </div>

                        <div class="answerText">3</div>

                    </div>
                    <div class="answer answerRight">
                        <div class="answerInput">

                            <input type="radio" name="name" value="4">
                        </div>
                        <div class="answerText">4</div>
                    </div>
                    <div class="answer answerRight">
                        <div class="answerInput">

                            <input type="radio" name="name" value="5">

                        </div>

                        <div class="answerText">5</div>

                    </div>
                    <div class="answer answerRight">
                        <div class="answerInput">
                            <input type="radio" name="name" value="6">
                        </div>
                        <div class="answerText">No response</div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="d-table-cell align-middle">
                <div class="titleMiddle">Person 2</div>
                                 <div class="d-table-cell align-middle pb-4">
                 <!-- Answer section for Person 2 -->
				<!-- Modify as needed -->
            </div>
            </div>
            <div class="d-table-cell align-middle">
                <div class="titleMiddle">Person 3</div>
                                <div class="d-table-cell align-middle pb-4">
               <!-- Answer section for Person 3 -->
				<!-- Modify as needed -->
            </div>
            </div>
        </div>
    </div>
</div>

If desired, each person can be placed in their own row with answers.

Answer №2

Try creating different individuals in separate divisions like this

.d-flex{
    display: flex;
}
.row{
    flex-direction: row;
}
.col{
    flex-direction: column;
}
<div class="d-flex row">
    <div class="d-flex col">
        <div>Person 1</div>
        <div class=" d-flex row">
            <span>Q1</span>
            <div>
                <input type="radio" name="q1" value="1" >
                <span >1</span>
            </div>
            <div>
                <input type="radio" name="q2" value="2">
                <span >2</span>
            </div>
            <div>
                <input type="radio" name="q3" value="3">
                <span >3</span>
            </div>
        </div>
    </div>
    <div class="d-flex col">
        <div>Person 1</div>
        <div class=" d-flex row">
            <span>Q1</span>
            <div>
                <input type="radio" name="q1" value="1" >
                <span >1</span>
            </div>
            <div>
                <input type="radio" name="q2" value="2">
                <span >2</span>
            </div>
            <div>
                <input type="radio" name="q3" value="3">
                <span >3</span>
            </div>
        </div>
    </div>
</div>

This structure can be used and media queries can be implemented for responsiveness.

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

Exploring the functionality of Angular directives for bidirectional data binding with object references

In my custom Angular directive (v1.4.3), I am passing two bindings. The first binding is an Object with 2-way binding (model: '=') that can either be an Array or a single Object like [{something: 'foo'}, {something: 'moo'}, ...

javascriptangularjs

Converting an image to base64 format for storing in localStorage using Javascript

Currently, I am working on code that sets the background-image of a link. This is what I have so far: $("a.link").css("background-image", "url('images/icon.png')"); However, I want to enhance it by storing the image in localStorage: if (!local ...

javascriptjqueryhtmlbase64local-storage

Showing data in a tabular format shows the results in various columns, one after the other

I have organized my data in a table format with 5 columns. The information flows across the page horizontally, but I would like it to fill each column first before moving to the next. This makes it easier for users to scan the data vertically rather than ...

phphtmlmysqlhtml-table

toggle the visibility of a div using an unordered list

One of my challenges involves toggling the visibility of a div (filter-panel--content) containing an unordered list when clicking on the label above it. #LABEL/DIV THAT CAN BE CLICKED AND TRIGGERS .click() <div class="filter-panel--flyout"> <d ...

javascriptjqueryhtmlcss

Step by step guide on loading a html project by clicking in a django project

I'm currently working on a Django project and I have two HTML files - sid.html and page2.html. The main page is sid.html. I want to load another page, page2.html, fully onto my window (not within a div) when a particular div is clicked. I've atte ...

htmlajaxdjango

What are some recommended strategies for directives communication in AngularJS without relying on $rootScope?

I am currently facing a challenge with my nested directive where I need to establish communication with another directive on the same page, sharing the same controller. Although I initially attempted the isolate scope approach, the complexity of the nestin ...

javascriptangularjs

How can I conceal the contents of a webpage until the entire page has finished loading before revealing them?

Is there a way to delay displaying my login template until all elements are fully loaded? Currently, when I visit the site, the template appears first followed by fonts and other components. I want to ensure that nothing is shown to the user until the enti ...

javascripthtmlfunctionclassvue.js

Occasionally, the system may mistakenly flag a password as invalid even though it is indeed correct

To ensure the password meets certain criteria, it must start with a Z, have at least 8 characters, and contain an asterisk *. Take a look at this validating function: function validatePassword() { var strPassword; //Prompt user to enter pas ...

javascript

Ensuring a value is fully defined before passing it as a prop in a component

Is there a way to handle passing down state as a prop in a React component that is being fetched from an API using useEffect and axios? The state is initially set to "null", and I am encountering issues when trying to pass it down as a prop before it is ...

javascriptreactjs

A guide to creating smiley emojis using solely HTML and CSS

Is there anyone who can assist me in constructing this happy face? https://i.sstatic.net/yyYYQ.png ...

htmlcss

How can you use jQuery to remove a class from an element after a specified period of time?

After updating a record in the database, I plan to make modifications using an AJAX request. Once that is done, I will dynamically add a class to the rendered div by utilizing the addClass method. The class being added (we'll refer to it as colored) c ...

javascriptjqueryfadeout

How to centrally align grids in a material-ui react application

I'm trying to center Grid items horizontally inside a Grid container, while also adding some spacing between the items. Here's the code I have so far: import React from "react"; import { makeStyles } from "@material-ui/core/styles& ...

cssreactjsmaterial-uigrid

What is the process for obtaining the sheetId using Google Sheets API with Javascript?

Hey there, if you need to use sortRange in the Google Sheets API, remember that sheetId should be an integer and not a string. How can I retrieve it starting with the sheet's name as a string? This method works perfectly for sorting my sheet. However ...

javascriptnode.jsgoogle-sheetsgoogle-api

What is the best way to ensure that the content fits within a div with a given max-width set by the parent div?

image description goes here I have a container set to a maximum width of 80%, but when the text inside extends beyond that, the container remains stuck at 80% instead of adjusting its size accordingly. Can anyone provide a solution for this issue? ...

cssstorybook

Having trouble with Bootstrap dropdowns not opening when clicking with jQuery?

I am in the process of developing a table with multiple rows, each containing an "Options" button to display a dropdown context menu. To streamline the code, I am utilizing a single div to serve as a common markup for the context menu. The technologies I ...

jquerycssbootstrap-5

The jst.js error in sails JS template indicates that the variable _ cannot be found

I am brand new to the world of programming and am currently diving into JavaScript and Sails JS. I must admit, I am enjoying the learning process so far, but recently encountered a problem that has left me scratching my head. Please bear with me as I may n ...

javascriptnode.jstemplatesunderscore.jssails.js

The top-center alignment in Toaster (ngx-toastr) is missing a top margin

I recently started using the ngx-toastr library in my project. I have a message service that displays error messages at the top-center of the screen with the following code: @Injectable() export class MessageService { constructor(private toastrServic ...

htmlcssangulartypescriptngx-toastr

Traversal of a binary tree in the order of visitation specified by the In

My task was to create a function that traverses a binary tree and returns an array of all its values in inorder. The code provided is: interface BinTree { root: number; left?: BinTree; right?: BinTree; }; const TreeInArray =(t:BinTree):number[] =>{ ...

javascripttypescript

What could be causing the RTCPeerConnection icegatheringstatechange to not function properly?

I have been trying to utilize the icegatheringstatechange event handler, but it doesn't seem to be functioning properly. Is there a different method I can use to monitor changes in icegatheringstate? How can I determine when all ice candidates have be ...

javascriptgoogle-chromebackbone.jswebrtc

Adjusting an element within an array obtained from a computed property

Within my Vuex store, I retrieve an array of rooms from a Firebase/Firestore API call. This array structure is as follows: [{label:'Kitchen', description:'...'}, ...]. To make this array accessible to my application, I utilize a Vuex ge ...

javascriptvue.jsvuejs2vuexcomputed-properties