How can I make blocks with the class name .b have equal width?
.parent {
display: flex;
}
.parent>div {
flex: 1 1 auto;
}
.parent .b {
display: flex;
}<div class="parent">
<div class="cell">
<div class="b"></div>
</div>
<div class="cell">>
<div class="b"></div>
</div>
<div class="cell">>
<div class="b"></div>
</div>
<div class="cell">>
<div class="b"></div>
</div>
<div>Why do the blocks with <div class="cell"> have varying widths?
Update: Implement CSS grid with auto-fit feature:
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
.parent>div {
background-color: lightblue;
margin-left: 5px;
}<div class="parent">
<div class="cell">
<div class="b"></div>
</div>
<div class="cell">>
<div class="b"></div>
</div>
<div class="cell">>
<div class="b"></div>
</div>
<div class="cell">>
<div class="b"></div>
</div>
</div>After another revision**
If you're looking to customize the layout of your elements, one easy way is by applying a flex property to the parent element. This will only affect the immediate children below it, like the cell class in this example where I've added borders for visual demonstration:
<div class="parent">
<div class="cell">
<div class="b"></div>
</div>
<div class="cell">
<div class="b"></div>
</div>
<div class="cell">
<div class="b"></div>
</div>
<div class="cell">
<div class="b"></div>
</div>
<div>
.parent {
display: flex;
width: 70%;
}
.cell {
width: 20%;
height: 100px;
border: 1px solid orange;
}
You can control the width of the parent element as well as its children with the above code snippet, ensuring consistency across the board while maintaining flexibility within the parent's boundaries.
** Alternatively, consider this streamlined approach utilizing different classes to adjust sizing preferences:
Here's an example showcasing varying sizes using distinct classes:
<div class="parent">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div>
.parent {
display: flex;
width: 80%;
height: 100px;
}
.a {
flex: 40%;
border: 1px solid greenyellow;
}
.b {
flex: 20%;
border: 1px solid orange;
}
.c {
flex: 20%;
border: 1px solid blue;
}
Feel free to consolidate these classes into one if preferring uniformity or modify them individually for unique styling - hope this clarifies the concept for you!
It seems that all elements have the same width. To achieve this, use the following CSS instead of selecting with .parent>div
.cell {
flex: 1 1 auto;
}
.parent {
display: flex;
}
.cell {
flex: 1 1 auto;
}
.parent .b {
display: flex;
align-items: center;
justify-content: center;
}
.b {
height: 50px;
}
.cell:nth-child(1) {
background: red;
}
.cell:nth-child(2) {
background: yellow;
}
.cell:nth-child(3) {
background: green;
}
.cell:nth-child(4) {
background: teal;
}<div class="parent">
<div class="cell">
<div class="b">hi</div>
</div>
<div class="cell">
<div class="b">hi</div>
</div>
<div class="cell">
<div class="b">hi</div>
</div>
<div class="cell">
<div class="b">hi</div>
</div>
<div>When designing a container, is it considered beneficial to assign each child within the container its own height property, even if the parent container has already been allocated a specific height? If not, are there alternate methods available for transfer ...
Encountering an issue while trying to use Selenium to click on a tab or button within my web application. Below are the code snippet and CSS selectors: Error message: selenium.common.exceptions.NoSuchElementException: Message: Unable to locate element: #t ...
$('#select').on('change', function() { name = $('#select :selected').val(); //some code here }); . bdr-txtline { border-bottom: 1px solid black; } <div class="container"> <div class="row"> <div ...
I have a table that dynamically displays a field with the id complaint_status, which can have values of "PENDING" or "CLEARED". I need help to set different background colors for the field based on these values: GREEN for CLEARED RED for PENDING Is the ...
When I work with a text editor, it generates HTML code that I save in the database. On another page, I need to display only the first 100 characters of the text without counting the HTML tags. For instance, let's say this is the HTML code saved in th ...
In one of my components, I have a fxLayout div with row wrap and *ngFor to display an array of material cards. Recently, I implemented a full-page loader in the component, but it seems to be affecting the responsiveness of the fxLayout. Now, the layout onl ...
Looking to customize the toggler in React, either by completely changing it or just adjusting the color. Tried solutions from various sources but haven't had any success. 5 Years Ago 1 Year Ago 1 Month Ago The code appears crossed out in dev tools ...
Struggling with my JavaScript drawing tool, particularly the draw() function. The line is consistently off-center below the mouse cursor. How do I fix this issue? My aim is to have the line always follow the center of the mouse as it moves. Could someone c ...
Unique Case Working on a Gatsby site with Tailwind CSS has brought to light an interesting challenge regarding different types of content. While the blog pages fill the entire viewport and offer scrolling options for overflowing content, other pages with ...
Check out this interactive shopping list. You can add items, delete them, and mark them as completed. Adding and deleting items works fine, but there's an issue when toggling them. Issue (occurs when toggling multiple list items) If you add 3 items ...
ul { list-style-type: none } .navbar-nav:hover .secondDropdown{ display:block; } .navbar-nav .secondDropdown{ display:none; } .navbarDropdown2{ display:none; } .dropdown-toggle:hover .navbarDropdown2 { display: block; } .dropdown-item:ho ...
I'm still getting the hang of HTML, JavaScript, and CSS but I recently made some changes to someone else's code to animate a gradient. The original code used background: rgb, but I switched it to background: rgba. It seems to be working fine, but ...
In the head section of my HTML, I have the following stylesheet: <link rel="stylesheet" href="/templates/jooswatch-v3-5/css/bootswatch/superhero/bootstrap.min.css"> I want to replace this stylesheet with different ones based on changes in the body# ...
I've successfully implemented a fading image on scroll as desired. However, upon closer inspection here, I've noticed that the text and menu below the image are positioned too far away, especially when resizing the browser window. My goal is to ...
Is there a way to increase the spacing between columns in a row in Bootstrap 4? I've tried adjusting it but can't seem to get the columns centered properly. It's ruining the look of my layout. See the image for reference: https://i.sstatic.n ...
My attempt to incorporate the bootstrap css file into my app using Webpack (v4.5) by following the guidelines on the official website (https://getbootstrap.com/docs/4.0/getting-started/webpack/) is resulting in an error message while running webpack. ERRO ...
I have implemented four header elements: home, about, portfolio, and contact. I want these elements to stretch across the entire navigation bar with each taking up 25% of the space. How can I achieve this? Additionally, I specified that the home element sh ...
Attempting to center my search field using the code below did not yield a responsive result. On mobile, it remains right on top with the footer, unlike on desktop where I'd like to see some space between them. This discrepancy only surfaces in small ...
Having an issue with responsiveness on my website at . When I access a webpage from the browser on my smartphone, the site is fully responsive. However, when I try to open it from a link in Messenger, it appears like the PC version shrunk down to fit a mob ...
https://i.sstatic.net/OHFFF.png My current webapp highlights the day of the week on a table for the current day and the day two weeks from now. However, I'm facing an issue with adjusting the highlight if either of these days falls on a holiday. Curr ...