Is there a way to use html and css to ensure that the green cards are perfectly contained within the red area?

I'm looking for a solution to make the green cards that overflow the red area fit within it. Is there a way to divide the remaining cards into separate rows within the red area?

Here is the HTML code:

<div class="dash-card">
        <div class="navbar">
            ...
        </div>
    </div>

And here is the CSS code:

body{
    margin: 0;
    padding: 0;
    background-color: #121212;
}
.dash-card{
    width: 95vw;
    background-color: #21272f;
    height: 95vh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    border-radius: 1rem;
    display: flex;
}
.navbar{
    width: 15%;
    height: 100%;
    ...
.mini-card:hover{
    background-color: #21272f;
    color: #48bd9d;
    border: solid .15rem #48bd9d;
}

I attempted using grid to organize them, but it made the layout look messy since the green cards weren't close together. I want them to be arranged closely like the green cards in the blue box. Any suggestions on achieving this?

htmlcssflexboxfrontendcss-grid

Answer №1

Indeed, by including flex-wrap: wrap in your .mini-card-container, you are all set!

body{
    margin: 0;
    padding: 0;
    background-color: #121212;
}
.dash-card{
    width: 95vw;
    background-color: #21272f;
    height: 95vh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    border-radius: 1rem;
    display: flex
}
.navbar{
    width: 15%;
    height: 100%;
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
    background-color: #48bd9d;
    color: #21272f;
    margin: 0;
    padding: 0;
}
.nav-menu-1{
    width: 100%;
    display: flex;
    align-items: center;
}

.nav-menu-2{
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    cursor: pointer;
    padding: .4rem .4rem;
    transition: .2s ease-in-out;
}
.nav-menu-3{
    width: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: .4rem .4rem;
    transition: .2s ease-in-out;
}

.nav-menu-1 img{
    width: 3.5rem;
}

.nav-menu-1-right{
    font-weight: 800;
    padding-left: 1rem;
    font-size: 1.5rem;
}

.nav-menu-2-right{
    padding-left: 1rem;
}

.nav-menu-3-right{
    padding-left: 1rem;
}

.nav-menu-1-left{
    padding-left: 1.5rem;
}

.nav-menu-2-left{
    padding-left: 1.5rem;
}

.nav-menu-3-left{
    padding-left: 1.5rem;
}
.section-1{
    padding-top: 1rem;
    margin-top: -3rem;
}
.section-2{
    margin-top: -5rem;
    width: 100%;
}
.section-3{
    width: 100%;
    margin-bottom: -4rem;
}
.nav-menu-2:hover{
    background-color: #21272f;
    color: #48bd9d;
}
.nav-menu-3:hover{
    background-color: #21272f;
    color: #48bd9d;
}
.right-subcard{
    background-color: red;
    width: 85%;
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
    padding: .5rem;
}
.mini-card-container{
    background-color: blue;
    display: flex;
    flex-wrap:wrap;
}
.mini-card{
    background-color: #48bd9d;
    padding: 1rem;
    border-radius: .5rem;
    display: block;
    margin: .3rem;
    cursor: pointer;
    transition: .2s ease-in-out;
    border: solid .15rem #21272f;
}
.mini-card:hover{
    background-color: #21272f;
    color: #48bd9d;
    border: solid .15rem #48bd9d;
}
<div class="dash-card">
        <div class="navbar">
            <div class="section-1">
                <div class="nav-menu-1">
                    <div class="nav-menu-1-left"><a href="/"><img src="{{ url_for('static', filename='img/bulk/logo-notext (1).png') }}"></a></div>
                    <div class="nav-menu-1-right">DFL</div>
                </div>
            </div>
            <div class="section-2">
                <div class="nav-menu-2">
                    <div class="nav-menu-2-left"><i class="fa-solid fa-box fa-lg"></i></div>
                    <div class="nav-menu-2-right">Dashboard</div>
                </div>
                <div class="nav-menu-2">
                    <div class="nav-menu-2-left"><i class="fa-solid fa-chart-pie fa-lg"></i></div>
                    <div class="nav-menu-2-right">Charts</div>
                </div>
                <div class="nav-menu-2">
                    <div class="nav-menu-2-left"><i class="fa-solid fa-magnifying-glass fa-lg"></i></div>
                    <div class="nav-menu-2-right">OSINT</div>
                </div>
                <div class="nav-menu-2">
                    <div class="nav-menu-2-left"><i class="fa-solid fa-box fa-lg"></i></div>
                    <div class="nav-menu-2-right">Title 3</div>
                </div>
                <div class="nav-menu-2">
                    <div class="nav-menu-2-left"><i class="fa-solid fa-box fa-lg"></i></div>
                    <div class="nav-menu-2-right">Title 4</div>
                </div>
            </div>
            <div class="section-3">
                <div class="nav-menu-3">
                    <div class="nav-menu-3-left"><i class="fa-solid fa-upload fa-lg"></i></div>
                    <div class="nav-menu-3-right">Upload</div>
                </div>
            </div>
        </div>
        <div class="right-subcard">
            <div class="mini-card-container">
          
                <div class="mini-card">
                    <div class="mini-card-logo"><i class="fa-solid fa-file-circle-plus fa-xl"></i></div>
                    <div class="mini-card-title">{{ file }}</div>
                    <div class="mini-card-details">348 records</div>
                </div>
     
                <div class="mini-card">
                    <div class="mini-card-logo"><i class="fa-solid fa-file-circle-plus fa-xl"></i></div>
                    <div class="mini-card-title">{{ file }}</div>
                    <div class="mini-card-details">348 records</div>
                </div>
                
                <div class="mini-card">
                    <div class="mini-card-logo"><i class="fa-solid fa-file-circle-plus fa-xl"></i></div>
                    <div class="mini-card-title">{{ file }}</div>
                    <div class="mini-card-details">348 records</div>
                </div>
                
                <div class="mini-card">
                    <div class="mini-card-logo"><i class="fa-solid fa-file-circle-plus fa-xl"></i></div>
                    <div class="mini-card-title">{{ file }}</div>
                    <div class="mini-card-details">348 records</div>
                </div>
                   
                 /* Additional similar mini card elements removed for brevity */
  
            </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

Developed a visually stunning image gallery using both Bootstrap Grid and Flexbox, though there are a few images that do not completely fill the flex container

I'm currently exploring web development and experimenting with creating a responsive image gallery using Bootstrap Grid and flexbox. However, I've encountered an issue where some of the images are not filling the entire height of the flex contain ...

htmlcssflexboxcss-gridbootstrap-5

Ways to incorporate the <span> tag into a chosen text using JQuery

Here is an example of a big paragraph: <p> hello this is my paragraph </p> I am looking to add a tag to the selected text within the entire paragraph. For instance, if I highlight "my paragraph," then I want the paragraph to appear as follow ...

javascriptjqueryhtmlcss

The SpringMvc tiles are failing to display the header and footer

One of the main components in my project is a file called tiles.xml <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE tiles-definitions PUBLIC "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN" "http://tiles.apa ...

javacssspringjspspring-mvc

Shifting an image to the corner using HTML and CSS

As I work on designing a coming soon page, my goal is to have the voter's hand extend all the way to the edge of the screen by cutting off parts of the sleeve. Can you provide some guidance on what modifications are needed in the css/html code for thi ...

htmlcssimagebackground

Using an image tag within a button element causes functionality issues with JavaScript on Chrome

Can anyone help me figure out why my button with an image isn't toggling a div's class in Chrome? It works fine in Firefox. Here is the codepen link for reference: https://codepen.io/luansergiomattos/pen/zydWyM This is the HTML code: <div cl ...

javascripthtmlcss

What is the best way to dynamically render classes based on conditions in a table using React Bootstrap?

I am looking for a way to dynamically change the color of a class based on the transaction data in a table. import React from "react"; import Table from "react-bootstrap/Table"; import "./TableComponent.css"; const TableComponent = ({ Movement }) =&g ...

javascriptcssreactjsbootstrap-4react-bootstrap

Retrieve specific values from columns for dynamically generated rows using JavaScript

Currently, I am in the process of creating a dynamic table using PHP. In my screenshot, there are two rows with multiple columns. Each column in both rows has the same id. For example, the column for Monday has id="mon" in the first row and also id="mon" i ...

javascriptphpjqueryhtmlangularjs

How to create a dynamic background color animation in jQuery similar to a progress bar animation

I have a container with text content (for example: My Name) and it is displayed in a RED background color along with a button. What I am looking for : When the button is clicked, I want to change the background color of the container from RED to BLUE, si ...

jquerycssjquery-uiprogress-barjquery-effects

I am experiencing an issue where the submenu does not appear when I hover over the elements in the navigation bar

How can I make the submenu appear when hovering over the corresponding navigation element on the navigation bar? Here is how I set the display to none for the second level navigation list: nav ul ul { position:absolute; top: 100%; background-colo ...

css

Having issue with jQuery popup not functioning correctly on the right side with the contact form. Is there anyone who knows how

Looking for a side slide popup that only accepts paragraph content? Want to add a contact form to it? Check out this fiddle - link here For a working example, visit - $(function() { // Slide from right to left $('#test2').PopupLayer({ ...

javascriptjqueryhtmlcss

Altering various HTML components with every swipe of SwiperJS

I am new to working with JavaScript and I have integrated a Swiper JS element into my HTML page. Here is the current code I am using: <head> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css&quo ...

javascripthtml

Tracking Time Spent in a Tab using HTML and JavaScript

I have a unique issue that requires a specific solution. Despite my extensive search across the internet, no useful answers were found. This is the snippet of HTML code in question: <form action="/timer.php" method="POST"> <span>Fir ...

javascriptphphtmlmysql

Center the text vertically within a card using Vuetify styling

I am seeking a way to vertically align text within a card using Vuetify or traditional CSS in a Vue project. Here is my code: <template> <div> <v-container class="my-5"> <v-row justify="space-between"> <v- ...

javascriptcssvue.jsfrontendvuetify.js

How to remove checkbox border using HTML, JavaScript, and CSS

Is it possible to remove the square border from a checkbox in HTML? ...

javascripthtmlcss

Creating nested squares using flexbox

I've been working on replicating this layout using flexbox: https://i.sstatic.net/Fmuk2.jpg While I've made progress with the layout, I'm encountering some strange flex-wrap behavior like this: https://i.sstatic.net/qH8Jq.png Here's ...

cssflexbox

When the user saves the changes on the pop-up window, the main window will automatically refresh

I currently have a calendar feature that allows users to create, edit, and delete appointments. When a user clicks on the new appointment button, it opens a window above the calendar interface. Once the user fills out the necessary fields and clicks save, ...

phpjavascriptjquerymysqlhtml

Triggering an event when selecting options in dropdown menus on Firefox

Currently, I am facing the following scenario: I have a single select box along with a tooltip that is displayed when the user clicks on the box to choose an option. The tooltip can easily be shown using CSS (select:focus ~ .tooltip) or jQuery by utilizin ...

javascriptjqueryhtmleventsblur

Ways to retrieve the marginLeft of an element set with absolute positioning?

Currently, I am attempting to display an information box when hovering over an element with the mouse. The issue I am facing is that the element moves, and I need to determine its left margin. However, the element does not have a margin-left property in ...

javascripthtmlcss

Using CSS background-image URL in .NET MVC tutorials

What is the correct way to route to an image in an MVC web application? MVC has default routes, meaning you can access the same page in multiple ways: 1. localhost 2. localhost/home/index However, you can also do it this way, changing the root directory. ...

cssasp.net-mvcurl

Monitor the change in values upon pressing the submit button on Angular

I am currently working with an edit form that contains data in the input fields. <ng-form #infoForm="ngForm" novalidate> <div> <label for="firstName">First Name :</label> <input type=" ...

htmlangulartypescriptangular-materialtypescript2.0