struggling to get my trio of cards to line up correctly on a compact screen

When my elements reach the breakpoint of 1199, I have an issue with their alignment. Despite using justify-content, the style breaks and the cards are not stacked together as intended. I tried using mx-auto, but it doesn't seem to work. I've noticed that my Bootstrap card columns are taking up too much space, and I attempted to align the cards similarly to how I did with texts in a grid, but it's not working as expected. When I reach the large breakpoint, I want the cards to be stacked evenly in the middle, rather than appearing the way they currently do. I could achieve this using padding, but it doesn't feel like the best or right way to do it.


          .wrapper3 {
            max-width: 100%;
            min-height: 70vh;
            background-color: red;
          }

          .card-container {
            display: flex;
            justify-content: center;
            align-items: center;
          }

          .cardStyle {
            max-width: 380px;
            min-height: auto;
            background-color: #2e2d2c;
          }

          @media screen and (max-width: 600px) {
            .wrapper3 {
              width: 100%;
              background-color: red;
            }
            .cardStyle {
              width: 70%;
              height: auto;
              background-color: #2e2d2c;
            }
          }
        
      

          <!-- HTML code snippet -->
        
      

Answer №1

To tackle this issue, I decided to eliminate the specific width assigned to the cards in my css stylesheet. This change caused the cards to automatically expand to 100% width within the container, utilizing padding for spacing. However, the card layout still wasn't ideal as I aimed to have them aligned side by side. This is when I turned to the grid system with breakpoints in Bootstrap, which effectively resolved the stacking problem.

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

Insert Angular HTML tag into TypeScript

I am currently working on creating my own text editor, but I'm facing an issue. When I apply the bold style, all of the text becomes bold. How can I make it so that only the text I select becomes bold without affecting the rest of the text? Additional ...

The button in the flex container is not wide enough due to center alignment

For my project, I implemented a CSS grid layout consisting of 20 rows and 20 columns (5% of screen for each cell). One particular page includes a button that initially fit within grid columns 5-8 and rows 6-9 without any issues. However, I wanted to center ...

JavaScript's jQuery selector retrieves a child element from one location and adds it to a different

Why does the Jquery children selector select the img element, extract it, remove it, and then append it to another div element? Shouldn't it create a copy of the element being appended? var $anchors = $("#imageGallery a"); var $overlay = $('&l ...

What causes jQuery's append function to trigger a redraw of my Div?

I have a unique function that incrementally increases the date by one day every second. Once the date matches specific dates, I aim to update my #newsDiv with extra text content. The #newsDiv will display all historical "news" and will be set to scroll to ...

The whitespace issue stems from the div element __next-build-watcher generated by next js and usecontext

There's a notification bar at the bottom of my page that lets the user know when their email has been sent. This bar is generated using useContext in React/Next.js. To see the code, check out this Codebox link: Code However, I've noticed there ...

Ways to delete a CSS attribute with jquery

Is there a way to eliminate a CSS property from a class without setting it to null? Let's say I have a class called myclass with the property right:0px. I want to completely remove right:0px from my class, not just set it to null. How can I achieve th ...

The Beginner's Guide to Mastering Ajax and Grails

As a newcomer to Grails and AJAX, I find myself struggling to understand the concept of AJAX with limited resources online. My current understanding is that in Grails, if I want to trigger a method in one of my controllers when a specific part of my HTML ...

Is it possible to drag the parent element but only select the text within the child

How can I make the parent div draggable, yet keep the text in the child span selectable? <aside draggable="true" id="dragme"> This is an aside, drag me. <span id="copyme" draggable="false">But copy me!</span> </aside> A simila ...

I'm having trouble with getting my Bootstrap CSS and JS links to function properly

The paths for the Bootstrap CSS and JS files have been included in the code, but unfortunately, they are not working. Instead, I am getting the following errors in the console: GET http://127.0.0.1:5000/[https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist ...

Activate a specific component of hover effect within multiple components generated by the `v-for` loop

Hey there! I'm currently facing a CSS challenge related to Vue. Let's say I want to display multiple components using v-for, and I want to add a hover effect to each component individually. The goal is to have the hover effect only apply to the c ...

Is there a way to customize the appearance of an unordered list by setting it to display as an image instead of default bullets? I want to

I have been attempting to achieve this desired outcome. However, my efforts to reproduce it resulted in the check marks being rendered at a smaller size than intended due to using an SVG file. An example of this issue can be seen in the following image: I ...

When a parent element uses the flex property and its child elements have no content, the flex child will expand

I am experiencing a peculiar issue that has left me puzzled. p { padding: 0; margin: 0; } .fc { display: flex; flex-direction: column; } .fc > article { flex: 1 1 auto; display: flex; flex-direction: column; border: 1px solid #000; ...

Autonomous boundary for list elements

I have a specific issue that can be observed in this fiddle: http://jsfiddle.net/h0qu4ffv/ where I set the margin-top of one list item to 50px, but all list items end up following this style. Is there a way to give each list item an independent margin, or ...

The Bootstrap dropdown functionality is not working properly and fails to open when clicked

Can anyone help with this Navber code issue? <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #FDFEFF;"> <div class="collapse navbar-collapse justify-content-center" id="navbarNav"> <a class="navbar-brand" ...

Does the body element inherit the line height property?

Below is some simple HTML code consisting of a div and a span: <div id="container">Some text to affect the width</div> <span>A</span> I am currently using Eric Meyer's CSS Reset, which sets the line-height of the body to 1 an ...

Can you provide instructions on how to display data in two lines within a mat-select field?

Is it possible to show selected options in mat-select with long strings in two lines within the same dropdown? Currently, the string appears incomplete. You can see an example of this issue here: incomplete string example <mat-form-field class="f ...

Guide to navigating to a different webpage with Node.js

I am a beginner user of NodeJS and I have a specific request. I need assistance with setting up a page redirect from one page to another upon clicking on a link. Any guidance provided will be greatly appreciated. Here is the code snippet: app.js var expr ...

Is it possible for a scrollable div to fill the space above a BottomNavigation bar?

My current project involves creating a fixed bottom navigation bar, with a scrollable div above it displaying various card lists. In my attempts to achieve this layout, I consulted both the Material-UI documentation here and here. However, I struggled to ...

How can I clear all jQuery toggled classes that have been added across the entire webpage in an Angular project?

Upon clicking a link within an element, the following CSS is applied: <a class="vehicleinfo avai-vehicle-info-anc-tag" ng-click="vehicleInfo($event)">Vehicle Info <span class="s-icon red-down-arrow"> </span> </a> $scope.vehic ...

What causes the CSS class and jQuery to become unresponsive when rapidly moving the cursor over a specific selector while utilizing .hover(), .addClass() and .removeClass()?

After creating a customized h1 element, I implemented a feature where a class is added and removed from it with a smooth transition of 300ms when the mouse hovers over and off its parent DIV #logo. This was achieved using jQuery's .hover() method alon ...