Managing the overflow of flex-boxes

I'm currently working on setting up a profiles section on my website featuring 4 profile boxes:

https://i.sstatic.net/lWrPA.png

While the layout looks good on larger screens, I am facing issues with how the boxes wrap on smaller screen sizes. Right now, the boxes wrap to the next row when they hit the edge of the screen, resulting in 3 profiles on one row and 1 on the next:

https://i.sstatic.net/E24O2.png

I'm looking to prevent this and implement 3 different configurations based on screen size:

https://i.sstatic.net/gM0qe.png

Can this be achieved using flexbox? 

.container {
    margin-bottom: 10px;
    margin-top: 10px;
    padding: 10px;
    align-items: flex-start;
    flex-basis: auto;
}

.flex-container {
    margin: 1px;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: space-between;
}

.flex-item {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.1s;
    -webkit-filter: opacity(60%);
    /* Safari 6.0 - 9.0 */
    filter: opacity(60%);
    width: 231px;
    height: 350px;
    margin-top: 10px;
    line-height: 10px;
    color: white;
    font-weight: bold;
    text-align: center;
}

.flex-item h4 {
    font-size: 22pt;
}

.flex-item p {
    font-size: 14pt;
}

.flex-item:hover {
    box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.4);
    -webkit-filter: opacity(100%);
    /* Safari 6.0 - 9.0 */
    filter: opacity(100%);
}


.person1 {
    background: #FB8B4F;
}

.person2 {
    background: #1FACE4;
}

.person3 {
    background: #EF626B;
}

.person4 {
    background: #8BE41F;
}

/*When screen is < 1000px : green */
@media screen and (max-width: 1000px) {
   /*  body {
        background-color: lightgreen;
    } */
    .flex-item {
        transform: scale(0.9);
    }
}

/*When screen is < 500px : blue */
@media screen and (max-width: 800px) {
    .flex-item {
      flex-direction: column;
      align-items:center;
    }
   /*  body {
        background-color: lightblue;
    } */
}
<!--Profiles-->
        <div class="container">
            <hr size="0.5">
            <h1 id="people">People</h1>
            <ul class="flex-container">
                <li class="flex-item person1">
                    <!-- <img src="images/profile_placeholder.gif" alt="p1"> -->

                    <h4><b>Person1</b></h4>
                    <p>Founder</p>
                </li>
                <li class="flex-item person2">
                    <!-- <img src="images/profile_placeholder.gif" alt="p2"> -->
                    <h4><b>Person2</b></h4>
                    <p>Treasurer</p>
                </li>
                <li class="flex-item person3">
                    <!-- <img src="images/profile_placeholder.gif" alt="p3"> -->
                    <h4><b>Person3</b></h4>
                    <p>Vice-president</p>
                </li>
                <li class="flex-item person4">
                    <!-- <img src="images/profile_placeholder.gif" alt="p4"> -->

                    <h4><b>Person4</b></h4>
                    <p>Secretary</p>
                </li>
            </ul>
        </div>

htmlcssflexbox

Answer №1

Here is a solution you can test out:

.container {
    margin-bottom: 10px;
    margin-top: 10px;
    padding: 10px;
    align-items: flex-start;
    flex-basis: auto;
}

.flex-container {
    margin: 1px;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: space-between;
}

.flex-item {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.1s;
    -webkit-filter: opacity(60%);
    /* Safari 6.0 - 9.0 */
    filter: opacity(60%);
    width: 100%; /* changed */
    height: 350px;
    margin-top: 10px;
    line-height: 10px;
    color: white;
    font-weight: bold;
    text-align: center;
}

/* Added these line */
@media only screen and (min-width: 600px) {
  .flex-item {
    width: 50%;
  }
}

@media only screen and (min-width: 900px) {
  .flex-item {
    width: 25%;
  }
}/* To here */

.flex-item h4 {
    font-size: 22pt;
}

.flex-item p {
    font-size: 14pt;
}

.flex-item:hover {
    box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.4);
    -webkit-filter: opacity(100%);
    /* Safari 6.0 - 9.0 */
    filter: opacity(100%);
}


.person1 {
    background: #FB8B4F;
}

.person2 {
    background: #1FACE4;
}

.person3 {
    background: #EF626B;
}

.person4 {
    background: #8BE41F;
}

/* Removed lines here */
<!--Profiles-->
        <div class="container">
            <hr size="0.5">
            <h1 id="people">People</h1>
            <ul class="flex-container">
                <li class="flex-item person1">
                    <!-- <img src="images/profile_placeholder.gif" alt="p1"> -->

                    <h4><b>Person1</b></h4>
                    <p>Founder</p>
                </li>
                <li class="flex-item person2">
                    <!-- <img src="images/profile_placeholder.gif" alt="p2"> -->
                    <h4><b>Person2</b></h4>
                    <p>Treasurer</p>
                </li>
                <li class="flex-item person3">
                    <!-- <img src="images/profile_placeholder.gif" alt="p3"> -->
                    <h4><b>Person3</b></h4>
                    <p>Vice-president</p>
                </li>
                <li class="flex-item person4">
                    <!-- <img src="images/profile_placeholder.gif" alt="p4"> -->

                    <h4><b>Person4</b></h4>
                    <p>Secretary</p>
                </li>
            </ul>
        </div>

Answer №2

Here's a clever workaround... Create a nested container within the li tags using your custom styles, and then adjust the width of the li elements to be 25%, 50%, or 100% based on media queries. 

.container {
    margin-bottom: 10px;
    margin-top: 10px;
    padding: 10px;
    align-items: flex-start;
    flex-basis: auto;
}

.flex-container {
    margin: 1px;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: space-between;
}
li {
  width: 25%;
  display: flex;
}


.flex-item {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.1s;
    -webkit-filter: opacity(60%);
    /* Safari 6.0 - 9.0 */
    filter: opacity(60%);
    width: 231px;
    height: 350px;
    /* margin-top: 10px; */
    line-height: 10px; 
    margin: 10px auto 0 auto;
    color: white;
    font-weight: bold;
    text-align: center;

}

.flex-item h4 {
    font-size: 22pt;
}

.flex-item p {
    font-size: 14pt;
}

.flex-item:hover {
    box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.4);
    -webkit-filter: opacity(100%);
    /* Safari 6.0 - 9.0 */
    filter: opacity(100%);
}


.person1 {
    background: #FB8B4F;
}

.person2 {
    background: #1FACE4;
}

.person3 {
    background: #EF626B;
}

.person4 {
    background: #8BE41F;
}

/*When screen is < 1000px : green */
@media screen and (max-width: 1000px) {
   /*  body {
        background-color: lightgreen;
    } */
    .flex-item {
        transform: scale(0.9);
    }
    li {
      width: 50%;
    }
}

/*When screen is < 500px : blue */
@media screen and (max-width: 600px) {
    .flex-item {
      flex-direction: column;
      align-items:center;
    }
    li {
      width: 100%;
    }
   /*  body {
        background-color: lightblue;
    } */
}
<!--Profiles-->
        <div class="container">
            <hr size="0.5">
            <h1 id="people">People</h1>
            <ul class="flex-container">
                <li>
                    <!-- <img src="images/profile_placeholder.gif" alt="p1"> -->
                    <div class="flex-item person1">
                      <h4><b>Person1</b></h4>
                      <p>Founder</p>
                    </div>

                </li>
                <li>
                    <!-- <img src="images/profile_placeholder.gif" alt="p2"> -->
                    <div class="flex-item person2">
                      <h4><b>Person2</b></h4>
                      <p>Treasurer</p>
                    </div>

                </li>
                <li>
                    <!-- <img src="images/profile_placeholder.gif" alt="p3"> -->
                    <div class="flex-item person3">
                      <h4><b>Person3</b></h4>
                      <p>Vice-president</p>
                    </div>
                </li>
                <li>
                    <!-- <img src="images/profile_placeholder.gif" alt="p4"> -->
                    <div class="flex-item person4">
                      <h4><b>Person4</b></h4>
                      <p>Secretary</p>
                    </div>
                </li>
            </ul>
        </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

Issues with sending form data to controller using AJAX in Laravel

I'm currently working on a form in Laravel that enables users to purchase products dynamically without needing to refresh the page. While I am successfully able to initiate the AJAX function, I am encountering an issue where the data is not being post ...

phpjqueryhtmlajaxlaravel

Instructions for turning an HTML table cell into an editable text box

Essentially, I'm looking to enable users to click on the table and edit the text within it. I found inspiration from this Js Fiddle: http://jsfiddle.net/ddd3nick/ExA3j/22/ Below is the code I've compiled based on the JS fiddle reference. I tho ...

javascriptjqueryhtmlhtml-table

Use the color specified within the string

Recently, we have been revamping an outdated product using VueJs. The original application utilized Spring Web Flow, where all the text editing information was stored in a string. After some research, I discovered that adding white-space: pre-line; as a ...

htmlcssvue.js

Menu with a full-width fluid input field using semantic-ui

I am trying to create a fixed top menu with an image on the left, an input to its right, and another input on the far right. My goal is to have the center input stretch to fill all remaining space between the image and the other input. Although I would no ...

csssemantic-ui

Is it possible to add a tooltip to a div without using any JavaScript or JQuery?

I've been working on designing a form that includes tooltips displayed constantly on the right side to assist users in completing their forms. To achieve this, I have separated each part into Divs and added a tooltip for each one. <div title="This ...

javascripthtmlcss

I need to see the image named tree.png

Could someone assist me in identifying the issue with this code that only displays the same image, tree.png, three times? var bankImages = ["troyano", "backup", "tree"]; jQuery.each( bankImages, function( i, val ) { $('#imagesCon ...

javascriptjquerycsshtml

Making poll everywhere items align horizontally using HTML: a step-by-step guide

Is there a way to display two different Poll Everywhere polls side by side on a Blackboard course, rather than having them stacked on top of each other? I have the embed codes for both polls ready to go. ...

htmlcsspollingblackboard

Can we implement attribute selectors in Material-UI while utilizing makeStyles?

Is it possible to extract all the div elements with specific Mui class names such as access-MuiPickersCalendarHeader-switchHeader, access-MuiPickersDay-day? My components are styled using StylesProvider which adds "access" as a prefix to the original Mater ...

javascriptcssreactjsmaterial-ui

Trouble with video embedding not adjusting properly within a Bootstrap 5 carousel

I'm currently facing an issue with two video embeds in a carousel. One has a standard bootstrap size of 16x9, while the other has a custom size of 4x5. Even though I'm using the embed-responsive code for both videos, none of them scale responsiv ...

cssresponsive-designbootstrap-5

How can CSS be used to prevent line breaks between elements in a web page?

div#banner>img { float: left; background-color: #4b634b; height: 265px; width: 80%; } ul { float: left; background-color: #769976; width: 162px; } <body> <div id="wrapper"> <header> <nav> <ul ...

csshtml

Slider Carousel for Multiple Items: Horizontal Orientation

I attempted to create a multi-item carousel slider using Bootstrap and found some code online to help me. However, the code is not functioning correctly. The issue is that the cards are not displaying next to each other horizontally as they should. Unfortu ...

javascripthtmlbootstrap-4

Is it possible to dynamically load records in real time with the help of PHP and jQuery?

I developed a custom system using PHP that allows users to post status messages, similar to a microblog. The system utilizes a database table structured like this: posts_mst ------------------ post_id_pk post_title post_content date_added Initially, I su ...

phpjavascriptjqueryhtmlajax

binding swipe action to click event

I am utilizing images from a database and implementing next and previous buttons for pagination. What I aim to do is connect the click events of these buttons to swipe actions, so that swiping from right to left triggers the next link, while swiping from l ...

jqueryhtmlajax

Changing the background of a Muitextfield input element conceals the label

Struggling to customize the Textfield from the global theme? Can't seem to achieve a colored background for the input only (white) without obscuring the label when it moves inside the input. Desired result : https://i.sstatic.net/us2G7.png Current o ...

javascriptcssreactjsmaterial-ui

simplest method to brighten the image in this specific instance

I have a simple question. We are looking to enhance some static images by adding a lightening effect with an overlay. For example, when hovering over an image like on this website: (just for the lightening effect). What is the best approach to achieve thi ...

jquerycss

Seeking further clarification on the topic of `custom Directive` in AngularJS

Implementing a login form in my application, I have chosen to display errors on blur of the input element. Although this approach works, I have encountered several questions regarding a custom directive I created without thorough explanation from the tuto ...

javascriptjqueryhtmlangularjs

Having trouble implementing a circular progress bar with a custom Tailwind CSS library, the desired effect is not being achieved

I am on a mission to create a circular progress indicator. Recently, I stumbled upon the daisyui library and its component called radial progress - The documentation mentions that: "Radial progress requires the use of the --value CSS variable." ...

cssreactjstailwind-css

Is there a way for me to duplicate a complex element multiple times within the same page?

As an illustration, let's say I have a social tab located in my header that I would like to duplicate in the footer. This tab is comprised of various buttons with SVG images on top, event listeners linked to button IDs, and CSS styling. One option is ...

javascripthtmlcssrepeatcopying

CSS: Strategies for eliminating empty cells within a grid layout by filtering out rows that contain partial or incomplete content

I am in need of creating a grid layout where each div is a specific width, and the number of rows depends on how many items there are. The twist is that I am unsure of the width of the outer container. My initial solution was to use CSS grid: #container ...

javascripthtmlcsscss-grid

Summernote information embedded with HTML elements

I just started using the summernote text editor and I'm trying to figure out how to extract the content from the textarea without all the HTML tags. This is what I have in my code: <textarea class="summernote" id="summernote" ng-model="blog.c ...

javascripthtmlangularjssummernote