I have little issue with Flex wrap, my code is like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.8.0/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
</head>
<body>
<section class="section">
<div class="container">
<div class="card">
<div class="card-content">
<div class="content">
<div class="box">
<div id="mr">
<div class="item " id="1">1</div>
<div class="item " id="2">2</div>
<div class="item " id="3">3</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
And CSS
.item {
height: 50px;
width: 50px;
border-radius: 1rem;
margin: 1rem .5rem;
background: #53d5bb;
color: rgba(255, 255, 255, 0.45);
-webkit-box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.05);
box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.05);
text-align: center;
line-height: 50px;
font-size: 1rem;
}
#mr {
display: flex;
flex-wrap: wrap-reverse;
}
.box {
height: 400px;
}
What am I doing wrong? Can this be up to Bulma CSS or I miss something? Why this class flex-wrap: wrap-reverse; doesn't work? Also, here is my fiddle https://jsfiddle.net/kv3gfs4r/1/
It works. When you resizes the window and container is not fully visible it works as it should. I would say it starts from bottom and wrap to the top so when wrap is needed it just writes from the bottom to top.
there is of course flex-direction: row-reverse that that would reverse the order of every element.
Please refer to what do you want to accomplish.
Related
I'm new to CSS and want to build a grid. However in this example here, my grid is expanding beyond its padding. Why's that? I added in a screenshot that shows there's no blue padding on the right side of the grid.
Shouldn't the grid-template-columns: auto auto cause the first two columns to decrease in size such that the last right two columns fit into the padding?
.grid-container {
display: grid;
grid-template-columns: auto auto 5px 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</body>
</html>
Actually, it works but you gave the font-size:30px and you try to stucking your grid with 5px and 10px. I suggest you should use min-content.
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto min-content min-content;
background-color: #2196f3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
line-height: 1.5;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</body>
</html>
I see what writed #essXTee, so the problem is in padding, like he said to you...
so now I changed padding from padding: 20px; to padding: 20px 0;
the first value of padding now is 20px,
the second is 0...
the first need to do padding in top and bottom
the second is set to 0, so NO padding in left and right of .grid-item (that solved your bug)
.grid-container {
display: grid;
grid-template-columns: auto auto 5px 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px 0;
font-size: 30px;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</body>
</html>
I have a div and inside that div, I have the text and one card and I have to make them vertical and horizontally centre similar to the image below. Thanks in advance.
.percentile-card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 30%;
height: 30%;
float: left;
}
.percentile-card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
<div class="border">
<h2 style="font-size: 3em;">Where Do i Stand Overall ?</h2>
<div class="percentile-card text-center">
<h3>You did better Than</h3>
<h3><b>60%</b></h3>
</div>
</div>
I watch all answers and I don't think, those answers are valid. So, I posted an answer.
.root_class {
display: flex;
justify-content: center;
align-items: center;
width: fit-content;
margin: 0 auto;
}
#media (max-width: 576px) {
.root_class {
flex-direction: column;
}
}
.text {
font-size: 2rem;
color: #bbb;
margin: 0;
margin-right: 1rem;
text-align: center;
}
.percentile-card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
margin: 1rem;
}
.percentile-card p {
margin: 0;
}
.percentile-card p:first-child {
color: #bbb;
}
.percentile-card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="border root_class">
<p class="text">Where Do i Stand Overall ?</p>
<div class="percentile-card text-center">
<p>You did better Than</p>
<p><b>60%</b></p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
In order to centre that in the middle of the page you can remove the float property from percentile-card and replace it with a centred margin.
For vertical alignment you can use view height.
This w3 link might be useful in highlighting margins. Along with these demos.
As for view height, if you do not want it set based on a constraint from the preceding element, you may want to consider positions.
Snippet:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.percentile-card{
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 800px;
height: 30%;
margin: 0 auto;
padding:10px;
}
.percentile-card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.border{
margin-top: 40vh;
text-align: center;
}
</style>
</head>
<body>
<div class="border">
<div class="percentile-card" style="display: flex;">
<div style="flex-basis: 70%">
<h2 style="font-size: 3em;">Where do I stand overall ?</h2>
</div>
<div class="percentile-card" style="flex-basis: 30%">
<h3 >You did better Than</h3>
<h3><b>60%</b></h3>
</div>
</div>
</div>
</body>
</html>
For the border with card inside variant:
Snippet:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.percentile-card{
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 800px;
height: 30%;
}
.percentile-card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.border{
margin-top: 40vh;
text-align: center;
}
</style>
</head>
<body>
<div class="border">
<div class="" style="display: flex; border:1px solid black;margin: 0 auto; padding:10px;width: 800px">
<div style="flex-basis: 70%">
<h2 style="font-size: 3em;">Where do I stand overall ?</h2>
</div>
<div class="percentile-card" style="flex-basis: 30%">
<h3 >You did better Than</h3>
<h3><b>60%</b></h3>
</div>
</div>
</div>
</body>
</html>
i fix it....
.percentile-card{
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 30%;
height: 30%;
float: left;
}
.percentile-card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.Center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="border">
<h2 style="font-size: 3em;">Where Do i Stand Overall ?</h2>
<div class="percentile-card text-center Center">
<h3>You did better Than</h3>
<h3><b>60%</b></h3>
</div>
</div>
👉🏻 Centering Things
Best place to understand and apply the centering css per your use case.
As per your code above, you can add css in your border class to be:
.border {
border: 1px solid red;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center
}
Below is working snippet:
.border {
border: 1px solid red;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center
}
.percentile-card{
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 30%;
height: 30%;
float: left;
}
.percentile-card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
<div class="border">
<h2 style="font-size: 3em;">Where Do i Stand Overall ?</h2>
<div class="percentile-card text-center">
<h3>You did better Than</h3>
<h3><b>60%</b></h3>
</div>
</div>
As the title suggest i want to make cards go from left to right instead of vertically i really dont know what to do and I have tried everything including float left
The code below is of one card. they are all the same with different text
and here is a screenshot of what it looks like
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
}
.card {
box-sizing: content-box
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.589);
}
.container {
padding: 2px 16px;
}
.card {
display: inline;
}
.card {
float: inline-start;
}
<div class="card">
<img src="Smash.jpg" alt="Smash" style="height:256px;width:356px">
<section id="text">
<div class="container">
<h4><b>New smash bros. game.</b></h4>
<p>Is it better than smash 4 we definitely hope so<br> Are there now too many characters?</p>
</section>
</div>
</div>
</div>
Flex makes it very easy to do. Wrap it in a container and set the flex-direction to row.
.cards {
display: flex;
flex-direction: row;
}
.card {
display: flex;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
}
.card {
box-sizing: content-box;
margin: 10px;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.589);
}
.container {
padding: 2px 16px;
}
<div class="cards">
<div class="card">
<img src="Smash.jpg" alt="Smash" style="height:256px;width:356px">
<section id="text">
<div class="container">
<h4><b>New smash bros. game.</b></h4>
<p>Is it better than smash 4 we definitely hope so<br> Are there now too many characters?</p>
</div>
</section>
</div>
<div class="card">
<img src="Smash.jpg" alt="Smash" style="height:256px;width:356px">
<section id="text">
<div class="container">
<h4><b>New smash bros. game.</b></h4>
<p>Is it better than smash 4 we definitely hope so<br> Are there now too many characters?</p>
</div>
</section>
</div>
</div>
wrap your cards in a div and set the div to
here is an example:
.wrap {
display: flex;
justify-content: space-between;`
}
<div class="wrap">
<div class="card">
card content
</div>
<div class="card">
card content
</div>
<div class="card">
card content
</div>
</div>
This question already has answers here:
Why doesn't height: 100% work to expand divs to the screen height?
(12 answers)
Percentage Height HTML 5/CSS
(7 answers)
Closed 4 years ago.
I'm trying to get the container div to stretch to the full height of the parent. As you can see the parent (body) has the info color and the container has the primary color. The color of the container should stretch over the color of the parent, but its not. I just used colors to help identify what section of my html was not stretching to the full height of the page. Below is the source
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body class="body bg-info">
<div class="container-fluid bg-primary">
<div class="row">
<div class="col-md-4">
<div class="info-stats">
Image Id:
</div>
</div>
<div class="col-md-4">
<div class="info-stats">
Status:
</div>
</div>
<div class="col-md-4">
<div class="info-stats">
Endpoint:
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="info-logs">
Logs:
</div>
</div>
</div>
</div>
</body>
</html>
and the css file
.body {
background: #eeeeee;
}
.info-stats {
background: #ffffff;
box-shadow: 0 0px 3px rgba(0, 0, 0, .19), 0 0px 3px rgba(0, 0, 0, .23);
height: 25%;
width: 100%;
margin-top: .5%;
}
.info-logs {
background: #ffffff;
height: 50%;
width: 100%;
box-shadow: 0 0px 3px rgba(0, 0, 0, .19), 0 0px 3px rgba(0, 0, 0, .23);
margin-top: 1%;
}
.container-fluid {
height: 100%;
}
appreciate the help!
The reason is that your html and body tag are not strechted to be full height. You should style them like this:
html, body {
height: 100vh;
}
Here is a working codepen
You can't use min-height as it won't work with .container-fluid {height:100%}.
Note: Don't use background color for finding html elements! Instead use inspect element and hover your mouse over html elements.
Elements with 100% height only expand to the height of their parent elements. Add 100% height to the html and body tags:
html,body{
height: 100%;
}
While you're at it, get rid of the height from .info-stats and .info-logs:
html,body{
height: 100%;
}
.body {
background: #eeeeee;
}
.info-stats {
background: #ffffff;
box-shadow: 0 0px 3px rgba(0, 0, 0, .19), 0 0px 3px rgba(0, 0, 0, .23);
width: 100%;
margin-top: .5%;
}
.info-logs {
background: #ffffff;
width: 100%;
box-shadow: 0 0px 3px rgba(0, 0, 0, .19), 0 0px 3px rgba(0, 0, 0, .23);
margin-top: 1%;
}
.container-fluid {
height: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<body class="body bg-info">
<div class="container-fluid bg-primary">
<div class="row">
<div class="col-md-4">
<div class="info-stats">
Image Id:
</div>
</div>
<div class="col-md-4">
<div class="info-stats">
Status:
</div>
</div>
<div class="col-md-4">
<div class="info-stats">
Endpoint:
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="info-logs">
Logs:
</div>
</div>
</div>
</div>
</body>
</html>
Try this... set height: 100%; for .info-stats and .info-logs
.body {
background: #eeeeee;
}
.info-stats {
background: #ffffff;
box-shadow: 0 0px 3px rgba(0, 0, 0, .19), 0 0px 3px rgba(0, 0, 0, .23);
height: 100%;
width: 100%;
margin-top: .5%;
}
.info-logs {
background: #ffffff;
height: 100%;
width: 100%;
box-shadow: 0 0px 3px rgba(0, 0, 0, .19), 0 0px 3px rgba(0, 0, 0, .23);
margin-top: 1%;
}
.container-fluid {
height: 100%;
}
<html>
<head>
<meta charset="utf-8">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body class="body bg-info">
<div class="container-fluid bg-primary">
<div class="row">
<div class="col-md-4">
<div class="info-stats">
Image Id:
</div>
</div>
<div class="col-md-4">
<div class="info-stats">
Status:
</div>
</div>
<div class="col-md-4">
<div class="info-stats">
Endpoint:
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="info-logs">
Logs:
</div>
</div>
</div>
</div>
</body>
</html>
Needing some help with CSS flexbox today. I believe I've configured flexbox right, I want each list item to stack, and then each div in the li to perform a space-between and have the content centered vertically in each div. This is to serve in an auto-complete.. How it is actually displaying though is: (not seeming to honour a height setting)
I have created a code snippet, code simplified from angular.io removed for sake of example. The isolated code snippet appears to work fine! Can you guys see anything else that could be causing an issue?
ul.search-result {
margin-top: 4px;
padding-left: 0;
outline: 0;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
position: absolute;
background: white;
z-index: 99;
display: none;
//width: 355px;
//height: 300px;
overflow: auto;
display: flex;
flex-direction: column;
}
li {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 60px;//60px;
padding: 10px;
background-color: #E9EDEF;
cursor: pointer;
list-style-type: none;
border: solid 1px red;
}
<ul class="search-result" style="width:500px;max-height:500px;">
<li>
<div class="icon">
image
</div>
<div class="title">
<div class="name">name</div>
<div class="location">location</div>
</div>
<div class="status">
status
</div>
</li>
<li>
<div class="icon">
image
</div>
<div class="title">
<div class="name">name</div>
<div class="location">location</div>
</div>
<div class="status">
status
</div>
</li>
<li>
<div class="icon">
image
</div>
<div class="title">
<div class="name">name</div>
<div class="location">location</div>
</div>
<div class="status">
status
</div>
</li>
</ul>
In the end, I simply re-jigged all my CSS and html to follow this approach I mentioned in my final comment on the question.
Thanks for the trouble.