I have a container that is holding cards. the container has a overflow-x: scroll; and is not showing all of the cards(its cutting some of one off). with enough cards it will auto add a scroll bar, yet it seams to be offset by 60px yet there is nothing that might be moving it.
#cardcontainer {
width: 100%;
height: fit-content;
margin-top: 20vh;
margin-left: 0px;
display: flex;
justify-content: center;
overflow-y: hidden;
overflow-x: scroll;
}
.card {
max-width: 300px;
background-color: rgb(64, 64, 64);
padding: 6px;
margin: 0px 0.5%;
border-radius: 12px;
display: inline-block;
position: relative;
}
<div id="cardcontainer">
<div class="card">
<h3>Content here</h3>
</div>
<div class="card">
<h3>Content here</h3>
</div>
<div class="card">
<h3>Content here</h3>
</div>
<div class="card">
<h3>Content here</h3>
</div>
<div class="card">
<h3>Content here</h3>
</div>
<div class="card">
<h3>Content here</h3>
</div>
<div class="card">
<h3>Content here</h3>
</div>
<div class="card">
<h3>Content here</h3>
</div>
<div class="card">
<h3>Content here</h3>
</div>
<div class="card">
<h3>Content here</h3>
</div>
</div>
the card on the left is being cut off even though i set the overflow to scroll. could u what your declared max-width is and how the result looks like. Thanks ^^
Related
I have defined cards in my css. Assigning a background color in css would make every cards of same color. How do I make those two cards of different background color? Is there any inline solution for it?
/* Float four columns side by side */
.column {
float: left;
width: 25%;
padding: 0 10px;
}
.card {
padding: 16px;
text-align: center;
background-color: #ffff00;
}
</div><div class="row">
<div class="column">
<div class="card">
<h3>Card 1</h3>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
<div class="column">
<div class="card">
<h3>Card 2</h3>
<p>Some text</p>
<p>Some text</p>
</div>
There are a million ways to do it. Here's one (I added the "othercard" class to one of them).
/* Float four columns side by side */
.column {
float: left;
width: 25%;
padding: 0 10px;
}
.card {
padding: 16px;
text-align: center;
background-color: #ffff00;
}
.othercard {
background-color: #00ff00;
}
</div><div class="row">
<div class="column">
<div class="card">
<h3>Card 1</h3>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
<div class="column">
<div class="card othercard">
<h3>Card 2</h3>
<p>Some text</p>
<p>Some text</p>
</div>
enter image description herei need your help for my bootstrap website. I struggling around to get it working but always got this annoying grid issue? I dont know exactly what it is. The Output eats some of my colores boxes if i lower the size of the screen. (using Firefox, Bootstrap)
.row {
width:100%;
height:15rem;
background-color: green;
margin:0 auto;
margin-top: 3%;
}
.container{
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.col-md-4{
position: relative;
padding:5px;
height:100%;
}
.col-md-12{
height:100%;
}
<div class="container">
<h1>Hello World!</h1>
<div class="row">
<div class="col-md-4" style="background-color:yellow;">
<div class="col-md-12" style="background-color:lightyellow;">
<p>Lorem ipsum...</p>
</div>
</div>
<div class="col-md-4" style="background-color:red;">
<div class="col-md-12" style="background-color:darkred;">
<p>Lorem ipsum...</p>
</div>
</div>
<div class="col-md-4" style="background-color:blue;">
<div class="col-md-12" style="background-color:lightblue;">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4" style="background-color:purple;">
<div class="col-md-12" style="background-color:red;">
<p>Lorem ipsum...</p>
</div>
</div>
<div class="col-md-4" style="background-color:pink;">
<div class="col-md-12" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
</div>
<div class="col-md-4" style="background-color:lightblue;">
<div class="col-md-12" style="background-color:blue;">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
</div>
As you can see in the picture below the 2end and 3rd items are hidden under the next row. What i'm doing wrong? The should line up under each otherafter i lower the display size. There should be 6 boxes inside but it only displays 4 of them.Full view should looks like this
elemts got eaten by each other why?Small view for smartpone
behind the red box is some other hidding. I tried alot and failed so hard. Maybe someone can help me.
left and right white space
The height on the row is causing your problems. You could move the height to be on the columns instead (or remove it entirely if you don't need them to be expanded like that).
.row {
width: 100%;
background-color: green;
margin: 0 auto;
margin-top: 3%;
}
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.col-md-4 {
position: relative;
padding: 5px;
height: 15rem;
}
.col-md-12 {
height: 15rem;
}
<div class="container">
<h1>Hello World!</h1>
<div class="row">
<div class="col-md-4" style="background-color:yellow;">
<div class="col-md-12" style="background-color:lightyellow;">
<p>Lorem ipsum...</p>
</div>
</div>
<div class="col-md-4" style="background-color:red;">
<div class="col-md-12" style="background-color:darkred;">
<p>Lorem ipsum...</p>
</div>
</div>
<div class="col-md-4" style="background-color:blue;">
<div class="col-md-12" style="background-color:lightblue;">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4" style="background-color:purple;">
<div class="col-md-12" style="background-color:red;">
<p>Lorem ipsum...</p>
</div>
</div>
<div class="col-md-4" style="background-color:pink;">
<div class="col-md-12" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
</div>
<div class="col-md-4" style="background-color:lightblue;">
<div class="col-md-12" style="background-color:blue;">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
</div>
This question already has answers here:
Flex-box: Align last row to grid
(35 answers)
Closed 4 years ago.
i have a container which contain some cards, I want each card to start at left border of container and end at right border , like the below code.
<html>
<style>
.container {
display: flex;
justify-content: space-between;
flex-direction: row;
flex-wrap: wrap;
}
.card{
border:1px solid black;
}
</style>
<body>
<div class="container">
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
</div>
</body>
</html>
but last 2 elements have too much space between them, how can I remove it??
I have tried adding margin-left/right to behave like I want but the corner cards don't touch the border. any help??
Edit: here is what i expect and
and what I get
This is because of the behavior of justify-content: space-between. Learn about the behavior of justify-content visit here
To achieve what you wanted you can set the container as block element and set the children to be floated like float:left.
To avoid the unwanted spaces I removed the margin-left of the .card:first-child and margin-right of the .card:last-child
You can specifically set the number of card content per a row by
setting a common width and clearing the margin space for
nth-child.Currently I made this code for 5 elements per row
.container {
display: block;
width: 100%;
}
.card {
border: 1px solid black;
float: left;
margin: 1px;
padding: 10px 3px;
/*setting width for each and every card element as well as -10px for removing the margin width for 5 elements*/
width: calc( 100% / 5 - 10px);
}
/*first element*/
.container .card:first-child {
margin-left: 0;
}
/*last element of the first row*/
.container .card:nth-child(5n) {
margin-right: 0;
}
/*first-element of the 2nd row*/
.container .card:nth-child(5n+1) {
margin-left: 0;
}
/*last element*/
.container .card:last-child {
margin-right: 0;
}
<div class="container">
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
</div>
I'm not quite sure I re-created your problem, but here is a codepen https://codepen.io/salallegra/pen/mQbBea that might help.
<html>
<style>
.container {
display: flex;
justify-content: space-between;
border-style: solid;
border-width: 1px;
border-color: red;
margin-left: 0px;
margin-right: 0px;
flex-direction: row;
flex-wrap: wrap;
}
.card {
border-style: solid;
border-width: 1px;
border-color: red;
}
body {
margin-left: 0;
margin-right: 0;
}
</style>
<body>
<div class="container">
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
</div>
</body>
</html>
I removed the left and right margin of the body and placed borders around all the cards, and the container itself.
I also checked different view port sizes in Chrome developer tools and the spacing looks fine at different sizes.
I am looking for ways to add in a 3x3 grid of circle icons to my website. Each icon needs to contain a caption text (including sub-caption text) and be spaced evenly apart. The center icons need to be in the center of the webpage.
I unfortunately have been stuck for the last couple of hours, and I have no idea on how to achieve this. I would appreciate any help.
Here is a mostly flexbox grid with square cells and centered content that will evenly space the circle/text.
* {
box-sizing: border-box; margin: 0; padding: 0;
}
.grid {
display: flex;
flex-wrap: wrap;
max-width: 960px;
width: 90%;
margin: auto;
background: #eee;
}
.cell {
flex-basis: 33.3%;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #fff;
}
.cell:before {
padding-bottom: 100%;
display: block;
content: '';
}
.circle {
background: #ccc;
border-radius: 50%;
width: 100px;
height: 100px;
margin: 0 auto 1em;
}
.inner {
text-align: center;
}
<div class="grid">
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
</div>
How would I vertically align text to the middle of a caption that has a position of absolute. I want the text whether it be 1 line or 2 lines for it to be in the middle of the green block.
Here is a example:
https://jsfiddle.net/DTcHh/7467/
<div class="row">
<div class="col-md-2 col-sm-4">
<div class="holder">
<div class="background">
</div>
<div class="text">
<h4>I am some text that needs</h4>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4">
<div class="holder">
<div class="background">
</div>
<div class="text">
<h4>I am some text that</h4>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4">
<div class="holder">
<div class="background">
</div>
<div class="text">
<h4>I am some text that needs</h4>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4">
<div class="holder">
<div class="background">
</div>
<div class="text">
<h4>I am some text that needs</h4>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4">
<div class="holder">
<div class="background">
</div>
<div class="text">
<h4>I am some text that</h4>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4">
<div class="holder">
<div class="background">
</div>
<div class="text">
<h4>I am some text that needs</h4>
</div>
</div>
</div>
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.holder {
position:relative;
display: table;
width: 100%;
}
.background {
background: #000;
height: 150px;
width: 100%;
}
.text {
position: absolute;
left:0;
right: 0;
bottom: 0;
text-align: center;
}
h4 {
background: green;
font-size: 1em;
margin: 0;
padding: 5px 10px;
min-height: 50px;
}
UPDATED
Like this ....
FIDDLE v4
This version I believe may have it.
Changed the <h4> to a <p>
Removed from <p>
width: 100%;
display: table-cell;
Added to <p>
margin-left: auto;
margin-right: auto;
transform: translateY(25%);
Changes to <p>
padding: 5px 10px; -TO- padding: 0px 10px;
Use line-height on h4 style with value more than double of the font-size:
h4 {
background: green;
font-size: 1em;
margin: 0;
padding: 5px 10px;
min-height: 50px;
line-height: 2.2em;
}
Checkout this DEMO