What steps do I need to take in order to arrange my cards into binary groups for PC viewing

Is there a way to display cards as binary groups for PC view? The layout looks fine on phone but the cards are all at the bottom when viewed on a computer.

This is how it currently appears:

https://i.sstatic.net/XBgJc.jpg

I want the card layout to resemble this:

https://i.sstatic.net/gDRpy.jpg

<div align="center" class="justify-content-center">
<div class="col-md-6 col-xl-3">
<div class="card-deck">
<div class="card" style="width:330px">
<center><h2 style="color:LightBlue;">CPX</h2>
<div class="card-body">
htmlcss

Answer №1

If you have provided your CSS and complete HTML, it will make it easier for the community to provide an answer. You can test out the following code:

*{
  box-sizing: border-box; 
}
.card-deck{           /*Assuming this class is the parent of all your cards*/
  column-count: 2;
  column-gap: 2.5rem;  /*Adjust according to your needs*/
}

.card{
  width: 45%;       /*Adjust as needed to prevent vertical scrolling*/
  height: 30%;      /*Adjust as needed*/
  padding: 20px;   /*Adjust as needed*/
}

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

What steps can I take to resolve the issue in my code? I keep receiving a type error stating that it cannot read

I seem to be encountering an issue when running my code where I receive a 'cannot read property 'age' of null'. This error breaks my code, and I'm trying to figure out how to implement a check to ensure it only runs when I am signe ...

javascripthtmlreactjs

Filtering data in a table using Jquery based on specific columns and headers

To retrieve a price value from an HTML table based on a specific column and header, follow these steps: Here is how the table is structured: https://i.sstatic.net/UM3MA.png The HTML code appears as follows: <input id="search_height" placeholder= ...

jqueryhtml

What causes the slowness of onsubmit=" " function?

Initially, I had the following setup: HTML: <form onsubmit="return validate()"> ... <input type="submit" id="submit-button"/> </form> JS: function validate() { // Extensive validation process with regex and more... $(& ...

javascriptjqueryhtmlvalidation

iFrame initially loads the page and subsequently reloads it continuously in a separate tab

Encountering a strange issue with IE11 regarding a series of links: <a href="page1.html" target="iframe_name">Page #1</a> <a href="page2.html" target="iframe_name">Page #2</a> <a href="page3.html" target="iframe_name">Page #3 ...

htmlajaxiframeinternet-explorer-7quirks-mode

Error encountered when attempting to utilize a variable within an EJS template document

I seem to be encountering some difficulties while attempting to get an EJS template file to recognize a variable that holds the rows from an SQLite3 table query in a related .js file. Whenever I try to access that route by launching the server, I receive a ...

htmlnode.jsexpressejs

performing iterations on html code with php

I have a code snippet inside an HTML file that I would like to loop using PHP. The goal is to repeat a paragraph on my HTML page as many times as needed. Any assistance with this would be greatly appreciated. <?php for($i=0;$i<=5;$i++){ <li ...

phphtml

Creating a Dynamic Navigation Bar with CSS and JavaScript

I have encountered an issue with my responsive menubar where the dropdown button does not have any style when clicked. function myFunction(){ var x = document.getElementById("myMenubar"); if (x.className === "menubar"){ x.className += "responsiv ...

javascripthtmlcss

Using Javascript to save basic high scores to a server

My JS game involves updating a score variable. When the game reaches a gameOver state, I want to compare the score to one saved on the server. If the player got a higher score, I'd like to overwrite the previous high score with the new one. If it&apos ...

javascriptphphtmlcssserver

What could be causing the issue with the 100% height and 100% width not functioning properly on my ASPX page?

The CSS and HTML code work perfectly in an isolated test environment: body, html { height: 100%; min-height:600px; min-width:800px; overflow:hidden; margin:0;padding:0; } html {overflow:auto;} .fill {height:100%; width:100%; backgro ...

htmlcssasp.net

Is there a way to lead to a password-protected page without making it accessible through the URL?

I'm currently honing my skills in web development and embarking on a project to create an interactive puzzle website. The premise is simple - the homepage will feature just an answer input field where users can enter the correct solution to progress t ...

javascriptphphtml

Don't forget to preserve the hover state of divs even after refreshing

I recently added a navigation bar that expands in width upon hovering over it. For an illustration, check out this example: http://jsfiddle.net/Gsj27/822/ However, I encountered an issue when clicking on a button within the hover effect area. After load ...

javascripthtmlcss

Utilizing the Jquery ready method in conjunction with the load function

While utilizing the ready() method to access the DOM, I encountered an issue where jQuery was returning undefined when trying to access an element. Even after nesting the ready() function inside $(window).on("load", function()), there were still instances ...

javascriptjqueryhtml

Grids designed in the style of Pinterest

Seeking advice on aligning divs in a Pinterest-style layout. Currently, my setup looks like this: https://i.sstatic.net/erlho.png But I want it to look more like this: https://i.sstatic.net/K9FnD.png Would greatly appreciate any tips or suggestions on ho ...

javascriptjqueryhtmlcss

Optimize data storage with javascript on Otree

I've been attempting to store the timestamp from a click in an Otree database, but I've tried using various codes without success. Here's the first code snippet: function myFunction() { var n = Date.now(); document.getElementById(" ...

javascripthtmlotree

Bug in ZURB Foundation Topbar causes incorrect highlighting of links on mobile when clicked

While utilizing the ZURB Foundation Topbar, I have encountered a bug that I find frustrating. When navigating the 2nd level drop downs and clicking on a link (li elements), the active highlight flickers to one of the elements above before taking you to the ...

csshtmlzurb-foundation

Tips for changing the background color of a dropdown menu when hovering in Zurb Foundation 5

Is there a way to customize the background color when hovering over <a href="#">Find Me</a>? I want the background color to change while hovering, similar to how it appears in the image before hovering. And this is how it looks after hovering: ...

csshtmlzurb-foundation-5

Click on the button to convert the content of the text area into a variable

Is there a way to capture all the text inside a textarea or input field as a variable upon button click using jQuery or JavaScript? The .select() function doesn't seem to achieve this, instead displaying numerous CSS properties when logged. What app ...

jqueryhtml

What causes the offsetWidth attribute to be zero in an array of elements within the DOM?

I am encountering an issue with a script that sets widths for certain elements in the Dom. Specifically, when I use the code var elements = document.querySelectorAll("p.caption"), the first 12 elements display the correct offsetWidth, but the remaining hal ...

javascriptjqueryhtmldom

How can I modify the color of a jQuery Mobile Select menu?

Is there a way to dynamically modify the color (background and text) of a single select menu in jQuery Mobile, without impacting other elements with the same class? I've experimented with various approaches, such as: $('#select').css({color ...

jqueryhtmlcssjquery-mobile

CSS selector for the 'second next' element, checkboxes and labels within MVC forms

I found a helpful resource that explains how to style checkboxes using CSS. It suggests using the + selector to target the label immediately following the checkbox: input[type="checkbox"]{} input[type="checkbox"] + label {} However, I encountered an issu ...

htmlcssasp.net-mvc