Tips for evenly distributing these cards

Check out the full code on Codepen.io

 <div class="card-container">
            <div class="card col-lg-4 col-sm-6 col-xs-12">
              <div class="side">Jimmy Eat World</div>
              <div class="side back"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/jimmy.jpg" alt="Jimmy Eat World"></div>
            </div>

Despite using Bootstrap, the cards in my layout are not spreading horizontally as expected and are shrinking instead of maintaining their original squared shape. What could be causing this issue?

htmlcssbootstrap-4

Answer №1

The width of 150px set in the codepen needs to be removed in order to allow for a full width container.

It is important that all columns are contained within a row.

To address this issue, I have eliminated the width from the style and introduced a "row" class to the card-container div. You can view the updated code here: https://codepen.io/anon/pen/MXVGVE

<div class="card-container row"> // Columns should be within a row class
  <div class="card col-lg-4 col-sm-6 col-xs-12">
    <div class="side">Jimmy Eat World</div>
    <div class="side back"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/jimmy.jpg" alt="Jimmy Eat World"></div>
  </div>
  <div class="card col-lg-4 col-sm-6 col-xs-12">
    Card 2...
  </div>
  <div class="card col-lg-4 col-sm-6 col-xs-12">
    Card 3...
  </div>
</div>

Answer №2

Remember, always wrap your col-.. in a row div

Instead of setting width: 150px; for .card-container, use width: 100%; and don't forget to add the row class to the card-container

.card-container {
    cursor: pointer;
    height: 150px;
    perspective: 600;
    position: relative;
    width: 100%;
  }
  .card {
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: all 1s ease-in-out;
    width: 100%;
  }
  .card:hover {
    transform: rotateY(180deg);
  }
  .card .side {
    backface-visibility: hidden;
    border-radius: 6px;
    height: 100%;
    position: absolute;
    overflow: hidden;
    width: 100%;
  }
  .card .back {
    background: #eaeaed;
    color: #0087cc;
    line-height: 150px;
    text-align: center;
    transform: rotateY(180deg);
  }
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<section class="section-heroes container" >
        <div class="u-center-text u-margin-bottom-big">
            <h2 class="heading-secondary">
                Choose your hero membership
            </h2>
        </div>

        <div class="row card-container">
                <div class="card col-lg-4 col-sm-6 col-xs-12">
                  <div class="side">Jimmy Eat World</div>
                  <div class="side back"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/jimmy.jpg" alt="Jimmy Eat World"></div>
                </div>

                <div class="card col-lg-4 col-sm-6 col-xs-12">
                        <div class="side">Jimmy Eat World</div>
                        <div class="side back"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/jimmy.jpg" alt="Jimmy Eat World"></div>
                      </div>

                      <div class="card col-lg-4 col-sm-6 col-xs-12">
                            <div class="side">Jimmy Eat World</div>
                            <div class="side back"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/jimmy.jpg" alt="Jimmy Eat World"></div>
                          </div>
              </div>

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

I encountered a problem in Javascript where I was unable to get the video.getCurrentTime() function to display the current time of

While everything else in my code is running smoothly with setInterval, there seems to be an issue with video.getCurrentTime() not displaying in the div id = "test" when the video is playing. I've been trying to figure out why this is happening. Here&a ...

javascripthtml

tips for reducing the size of the recaptcha image to display just one word

The custom recaptcha theme I'm working with requires the image to be smaller in width but not in height. Is there a way to achieve this requested design? ...

phpcssrecaptcha

Attempting to adjust table size in MPDF to fill the available height

I'm currently utilizing MPDF in order to create a PDF document from an HTML page that includes a table. My goal is to have the table expand to fill up the remaining space on the page. Here is the specific table I am working with: I want the final el ...

phphtmlcsspdfmpdf

Is it possible to create a CSS design where alternating table rows have two different heights?

Looking to design a table where the height of every other row is approximately one-third of the preceding row. I've managed to style this with an inline method, but I'm curious if it's possible to create separate tags for different tr styles ...

htmlcsshtml-table

Disabling an HTML attribute on a button prevents the ability to click on it

In my React application, I have a button component that looks like this: <button onClick={() =>alert('hi')} disabled={true}>test</button> When I removed the disabled attribute from the browser like so: <button disabled>test& ...

javascripthtmlreactjs

Angular select automatically saves the selected option when navigating between views

I would like the selected option in my dropdown menu to stay selected as I navigate through different views and then return back. Here is the view: <select ng-model="selectedSeason" class="form-control" ng-options="season as 'Season '+ seas ...

javascripthtmljsonangularjsangularjs-directive

Winning opportunities created by using credits in the slot machine

**Greetings, I have created a slot machine using JavaScript, but I am looking to enhance the player's chances based on their credits. Can anyone guide me on how to achieve this? Essentially, I want the player's odds to increase proportionally wit ...

javascripthtmlslot

Converting HTML/Javascript codes for Android Application use in Eclipse: A Step-by-Step Guide

How can I implement this in Java? Here is the HTML: <head> <title>Google Maps JavaScript API v3 Example: Geocoding Simple</title> <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="styles ...

javajavascriptandroidhtmleclipse

Enhance jQuery for a dynamic navigation dropdown with multiple sub-menus

Looking for help with a jQuery script as I am a beginner in using jQuery. jQuery(document).ready(function ($) { $(".sub-menu").hide(); $(".current_page_item .sub-menu").slideDown(200);; $("li.menu-item").click(function () { if ($('.sub-menu&apos ...

javascriptjquerycssmenunavigation

Updating content on a webpage via AJAX request without altering the original source code

Within the body of our document, referred to as "form.php," we have the following components: At the head section, there is a JavaScript code block: <script> function showUser(str) { if (str == "") { document.getElementById("txtHint").i ...

javascriptphphtmlajax

Does the use of CSS positioning impact the performance of browser rendering?

Given two DIVs, A and B, where A contains B, and the following CSS styles: A { margin-left: -2000px; } B { margin-left: 2000px; } With these CSS styles applied, the position of B remains unchanged compared to its original position without any CSS. I am c ...

cssperformancerendering

Canvas drawImage function not displaying image at specified dimensions

I'm having trouble loading an image into a canvas using the drawImage function. Additionally, I've implemented drag functionality but found that when moving the image inside the canvas, it doesn't follow the mouse cursor in a linear manner. ...

javascripthtmlcanvashtml5-canvas

Python script to extract data from websites containing javascript and script tags

I'm currently in the process of scraping a javascript-based webpage. After reading through some discussions, I was able to come up with the following code snippet: from bs4 import BeautifulSoup import requests website_url = requests.get('https:// ...

javascriptpythonhtml

suggesting options comparable to addthis or sharethis

Could you please check out ? There is a sharing box in the bottom right corner that resembles ShareThis. However, as far as I know, ShareThis does not have options for embedding or submitting content. Does anyone happen to know which plugin is being used ...

javascriptjqueryhtmlsharethis

Moving files by dragging and dropping rather than deleting them

I have successfully implemented a feature using JavaScript to drag and drop multiple files, followed by displaying those images. The code below is fully functional without any errors. Need help with: I am now looking to add the ability to remove these ima ...

javascripthtmljquerydrag-and-drop

Guide to correctly selecting <i> tags within a <p> tag using jQuery

I'm attempting to retrieve the text from the i (italic) elements within a paragraph using this code: $('p').each(function(j, element){ if($(element).is("i")){ console.log("The value is: "+$(element).text()); } }); However, ...

javascriptjqueryhtml

Unable to retrieve the 'href' on different pages

Why am I unable to retrieve the "href" from other pages, but still can on the first page? Is there something wrong with it? Will changing the Xpath allow me to get all "href"s from every page? !pip install selenium from selenium import webdriver import t ...

htmlselenium

Adding a class to radio buttons with a specific label using jQuery

As of now, I am utilizing jQuery to apply or remove a class when a radio button is selected. However, the issue arises when it checks all radio buttons, resulting in CSS being added to only one radio button. My HTML layout consists of rows containing eith ...

javascriptjqueryhtml

Place two divs side by side with the second div filling up the remaining space on the line

Hello there, can anyone lend a hand with this problem? This is the code I have been working with: <html> <body> <div style="width=100%"> <div style="float:left; background-color:Red; height:100px">Red</div> <div st ...

htmlcss

Remove the option to delete without making any changes to the flash file

Utilizing the DataTable javascript tool to export a grid, I have obtained the following HTML generated code: <div class="DTTT_container"> <a class="DTTT_button DTTT_button_copy" id="ToolTables_example_0" tabindex="0" aria-controls="e ...

javascriptjqueryhtmlflashdom