Adjusting Flex-Basis for various screen sizes

I am perplexed as to why this is not functioning correctly.

#parent {
  display: flex !important;
flex-flow: row wrap;
  width: 100% !important;
justify-content: flex-start;
}
.item{
flex: 1 !important;
flex-basis: calc(100% / 4);
box-sizing: border-box ;
border: solid 1px #000000;
margin-bottom: 30px !important;
max-width: 24%;
  height: 50px;
}

@media screen and (max-width: 767px) {
/* start of medium tablet styles */
.item{
flex-basis: calc(100% / 3) !important;
}
}

@media screen and (max-width: 479px) {
/* start of phone styles */
.item{
flex-basis: calc(100% / 2) !important;
}
}
<div id="parent">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

My intention was to adjust the flex-basis of the flex items on smaller screens, with 4 items per row normally, changing to 3 on tablets and 2 on mobile devices.

htmlcss

Answer №1

To make the necessary changes, simply delete the line with max-width: 24%

#parent {
  display: flex !important;
flex-flow: row wrap;
  width: 100% !important;
justify-content: flex-start;
}
.item{
flex: 1 !important;
flex-basis: calc(100% / 4);
box-sizing: border-box ;
border: solid 1px #000000;
margin-bottom: 30px !important;
  height: 50px;
}

@media screen and (max-width: 767px) {
/* start of medium tablet styles */
.item{
flex-basis: calc(100% / 3) !important;
}
}

@media screen and (max-width: 479px) {
.item{
flex-basis: calc(100% / 2) !important;
}
}
<div id="parent">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Answer №2

Hey there, it seems like you missed the mark on this one. From what I gathered, the max-width property was meant to prevent the item from spanning the entire width when there's only one.

If you take out the max-width and flex: 1, everything should work as intended.

Having both flex: 1 and flex-basis: calc(100% / 4); is repetitive.

While flex: 1 makes the item full width at 100%, using flex-basis: calc(100% / 4); divides the items into 4/3/2 groups. Therefore, having both max-width and flex: 1 becomes unnecessary in this context.

#parent {
display: flex !important;
flex-flow: row wrap;
width: 100% !important;
justify-content: flex-start;
}
.item{
flex-basis: calc(100% / 4);
box-sizing: border-box ;
border: solid 1px #000000;
margin-bottom: 30px !important;
height: 50px;
}

/* For tablet */
@media screen and (max-width: 767px) {
.item{
flex-basis: calc(100% / 3) !important;
}
}

/* For mobile */
@media screen and (max-width: 479px) {
.item{
flex-basis: calc(100% / 2) !important;
}
}

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

Automatically change a text based on its location

Currently leveraging the amazing flexible-nav to showcase the current subtopic within my post. I am also considering the possibility of extracting this current-string and showcasing it at the top of the page in my main navigation bar. This way, the text w ...

javascripthtmlcss

Is there a way to customize the background color when the Bootstrap 4 toggle switch is in the "checked" position?

I'm struggling to find a way to adjust the background color of the "checked" state for this toggle switch in Bootstrap 4. It utilizes an additional library for toggling between dark and light modes - you can find it here on github. While that function ...

csscheckboxbootstrap-4

Issue with Iframe DOM: encountering undefined values while attempting to retrieve form field data

For some reason, I've been struggling to debug a piece of JavaScript that should be straightforward. I've experimented with various approaches, such as using a form to access fields and using getElementById. I've also played around with incl ...

javascripthtmldomiframe

Setting default data in a data table that spans multiple pages is a useful feature that can

I am facing an issue with the default settings in the data table where I need the checkbox to be pre-checked on the controller's side. The problem arises when the checkbox is not staying checked after navigating to the second page and beyond. functi ...

javascriptphphtmldatatable

Issue with jQuery's .show method not functioning properly following the .hide method

Is there a way to make it so that only the "pastInvestments" are displayed when the "pastButton" is clicked, and only the "currentInvestments" are displayed when the "currentButton" is clicked? In the HTML code below, there are 2 buttons and 2 divs: < ...

jqueryhtmlcss

How to align multiple span elements vertically using HTML and CSS

<div class="row history"> <div class="col col-50 histroy1"> <span class="my-orders">Statistics</span> <span class="my-orders-numbers">27</span> </div> <div class="col col-50 histroy ...

htmlcss

When you zoom in or out, HTML5 elements styled with CSS will dynamically adjust

Hey everyone, I have a question about a problem I'm facing with my HTML and CSS page. The issue is that when I zoom in, the "Section" part moves underneath the nav bar, and when I zoom out, the footer moves next to the section part... Below is a sni ...

csshtmlcss-position

Having trouble dynamically displaying the '<' symbol using JavaScript?

Whenever I attempt to show a string with the character '<' in it, the part of the string that comes after the symbol is not displayed. Strangely enough, when I output it to the console, it appears correctly. Take a look at this excerpt showcas ...

javascripthtml

Best Practices for Integrating PHP Code into an HTML File for Contact Form Placement

My current setup involves an html file named index.html, which contains the code for my contact form fields such as name and email. Is there a way to include PHP code in this file without converting it to index.php? ...

phphtml

Selenium is unable to interact with hyperlink buttons in Python

I am currently working on a project where an automated program logs into an account and navigates through various webpages. My current struggle lies in the inability to click on any hyperlink buttons on a specific webpage to progress to the next page. I h ...

pythonhtmlseleniumselenium-webdrivercss-selectors

The Bootstrap row snag causing text display issues

There seems to be a glitch when the first column has more text than the one next to it. Check out the screenshot provided for reference. Any suggestions on how to fix this issue in Bootstrap? https://i.sstatic.net/fSq68.png Live Demo: https://jsfiddle. ...

htmlcsstwitter-bootstrap

How can I retrieve all values from an input number field that is created using *ngFor in Angular?

In my table, I have a list of cart products displayed with a quantity field. Users can increase or decrease the quantity using options provided. Currently, if I place an update button inside a loop, it creates separate buttons for each product. However, I ...

htmlangularngfor

CSS Code Failing to Adjust Inner Components Width in Variable Table

I'm facing an issue while trying to create an excel-style table using HTML and CSS. The problem arises when I attempt to have a varying number of columns in different rows, as the table exceeds the border limit and expands on its own. My goal is to re ...

javascripthtmlcss

Update: "Mui V5 - Eliminate collapse/expand icons in TreeView and reduce TreeItem indentation"

My current project involves Mui V5 and I am looking to customize the TreeView component. Specifically, I need to remove the collapse/expand icons as I want them to be integrated into the TreeItem label component on the left side instead of the right. Add ...

javascriptcssreactjsmaterial-uitreeview

Limiting the width of the child UL within an LI element in a dropdown navigation menu

I am trying to find a way to limit the width of a <ul> tag within a dropdown menu in CSS to match the width of its parent <li> element without setting a fixed width. Despite my efforts, I have not been successful in achieving this and I am seek ...

cssdrop-down-menu

Ways to activate the date input field and reformat it for smooth insertion or selection in mysqli

I would like to enable the input of dates in UK format - DD/MM/YYYY on an HTML form. Before any PHP code is executed, such as queries (e.g. select, insert, etc.), I want PHP to convert the entered date from DD/MM/YYYY to YYYY-MM-DD. HTML <div class="f ...

phphtmlmysqli

transferring data from an HTML form on the View page to the controller

I am currently working with the MVC framework. Within my project, I have a View named view1 which contains an HTML Form outlined below: <form action='/Exercise/Exercise4_SubmitForm' method="post"> Name: <input type="text" name=" ...

c#htmlasp.net-mvc

If a table column lacks an unspanned cell, IE will disregard its width

Here is a visual representation of the issue I am facing: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <body> <table border="1"> <colgroup> <col ...

htmlhtml-tableinternet-explorer-9colgroup

Ways to change content within an editable div without altering the current cursor location

In the javascript code below, I am trying to highlight characters after 255 and display them in another div with a different color. $( "#testdiv" ).keyup(function() { if($("#testdiv").text().length>255) { var text = $("#info").text() $("#te ...

jqueryhtmlcontenteditable

Creating a dynamic table using jQuery and XML content

Hello everyone, I am new to jQuery and JavaScript in general. My goal is to generate a table based on XML data, but I'm struggling to achieve the correct output. Here's what I have tried so far: Here is my HTML code: <table id="daily_fruit"& ...

javascriptjqueryhtmlxmlhtml-table