I need some help with my code. I have created a main-header block with white background and I would like to add four blocks that come to next to each other in the same line, I want to add a big font text in the center, a small font text below the big font text and also I want to add the mini border lines like this:
https://i.imgur.com/mUsBTMH.png
Here is the code:
<style type="text/css">
body {
background-color: #edf1f5;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
body {
background-color: #edf1f5;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.main-row {
background: #ffffff;
padding: 25px;
margin-top: 30px;
/* position: relative; */
/* min-height: 1px; */
/* padding-right: 15px; */
padding-left: 15px;
margin-bottom: 30px;
/* margin-right: -38px; */
margin-left: 30px;
width: 93%;
height: 60px;
/* display: table; */
content: " ";
}
.middle-row {
width: 20%;
height: 60px;
margin-top: 5px;
margin-left: 30px;
}
.middle-number {
font-size: 38px;
font-weight: bold;
margin: 0 0 10px 0;
white-space: nowrap;
padding: 0;
text-align: center;
}
.lower-text {
font-size: 16px;
white-space: nowrap;
margin: 0 0 10px 0;
padding: 0;
text-align: center;
margin-top: 40px;
}
</style>
<body>
<div class="main-row">
<div class="middle-row">
<span class="middle-number">0</span><br>
<span class="lower-text">Opened</span>
</div>
<div class="middle-row">
<span class="middle-number">0</span><br>
<span class="lower-text">Click Rate</span>
</div>
<div class="middle-row">
<span class="middle-number">0</span><br>
<span class="lower-text">Subscribers</span>
</div>
<div class="middle-row">
<span class="middle-number">0</span><br>
<span class="lower-text">UnSubscribers</span>
</div>
</div>
</body>
When I try it, I can create the width from the left to the right and I can also create the height, but I have got no idea how I can add the four blocks that come next to each other in the same line. And also I have got no idea how I could add the mini border line for each block as you can see the small grey lines in the picture.
Can you please show me an example how I can add four blocks that come to each other in the same line, a big and small texts on the top and bottom and add a mini border line for each block?
Thank you.
Here is an example with 4 blocks:
body {
background-color: #edf1f5;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.main-row {
background: #ffffff;
padding: 25px;
margin-top: 30px;
padding-left: 15px;
margin-bottom: 30px;
margin-left: 30px;
width: 93%;
height: 60px;
display: flex;
flex-direction: row;
flex-wrap: no-wrap;
justify-content: center;
align-items: center;
}
.middle-row {
min-width: 100px;
text-align: center;
}
.middle-row:not(:last-of-type) {
border-right: 1px solid #ccc;
}
<div class="main-row">
<div class="middle-row">
<p>11</p>
<p>Text</p>
</div>
<div class="middle-row">
<p>22</p>
<p>Text</p>
</div>
<div class="middle-row">
<p>33</p>
<p>Text</p>
</div>
<div class="middle-row">
<p>44</p>
<p>Text</p>
</div>
</div>
Also here is a link to a flexbox guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/.
Hope it helps.
Related
This question already has answers here:
How can I position my div at the bottom of its container?
(25 answers)
Closed 10 months ago.
I want to keep the button at bottom previously which I was making it possible by writing more text to push it to bottom but it wasn't responsive for every device any way I can keep the button in a div at bottom?
:root {
--clr-primary: #651fff;
--clr-gray: #37474f;
--clr-gray-light: #b0bec5;
}
* {
box-sizing: border-box;
font-family: "Open Sans", sans-serif;
margin: 0;
padding: 0;
}
body {
color: var(--clr-gray);
margin: 2rem;
}
.wrapper-grid {
display: grid;
grid-template-columns: repeat(auto-fit, 20rem);
justify-content: center;
}
.container {
overflow: hidden;
box-shadow: 0px 2px 8px 0px var(--clr-gray-light);
background-color: white;
text-align: center;
border-radius: 1rem;
position: relative;
margin: 2rem 0.5rem;
}
.banner-img {
position: absolute;
background-image: url(https://gaito.000webhostapp.com/im/istockphoto-1307289824-640x640.jpg);
height: 10rem;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.profile-img {
width: 8rem;
clip-path: circle(60px at center);
margin-top: 4.5rem;
height: 8rem;
}
.name {
font-weight: bold;
font-size: 1.5rem;
}
.description {
margin: 1rem 2rem;
font-size: 0.9rem;
}
.btn {
width: 100%;
border: none;
font-size: 1rem;
font-weight: bold;
color: white;
padding: 1rem;
background-color: var(--clr-primary);
}
<div class="wrapper-grid">
<div class="container">
<div class='banner-img'></div>
<img src='https://i.pinimg.com/originals/49/09/f9/4909f9e82c492b1e4d52c2bcd9daaf97.jpg' class="profile-img">
<h1 class="name">Slime</h1>
<p class="description">Slimes also commonly called ooze are common types of</p>
<button class='btn'>Attack this dungeon </button>
</div>
<div class="container">
<div class='banner-img'></div>
<img src='https://static.wikia.nocookie.net/kumo-desu-ga-nani-ka/images/4/4c/Mother_1.png/' alt='profile image' class="profile-img">
<h1 class="name">Gaint spider</h1>
<p class="description">This creature shoots sticky strands of webbing from its abdomen which are most commonly found underground, making their lairs on ceilings or in dark, web-filled crevices.</p>
<button class='btn'>Attack this dungeon </button>
</div>
</div>
Codepen
My solution would be:
.container {
display: flex;
flex-flow: column nowrap; /* Flex everything inside your cards vertically */
}
.description {
flex-grow: 1;
/*
When a card has more space (because another card is taller
with more info) - grow the description
*/
}
Here is a working snippet, click Full page top right to see it working:
:root {
--clr-primary: #651fff;
--clr-gray: #37474f;
--clr-gray-light: #b0bec5;
}
* {
box-sizing: border-box;
font-family: "Open Sans", sans-serif;
margin: 0;
padding: 0;
}
body {
color: var(--clr-gray);
margin: 2rem;
}
.wrapper-grid {
display: grid;
grid-template-columns: repeat(auto-fit, 20rem);
justify-content: center;
}
.container {
overflow: hidden;
display: flex;
flex-flow: column nowrap;
align-items: center;
box-shadow: 0px 2px 8px 0px var(--clr-gray-light);
background-color: white;
text-align: center;
border-radius: 1rem;
position: relative;
margin: 2rem 0.5rem;
}
.banner-img {
position: absolute;
background-image: url(https://gaito.000webhostapp.com/im/istockphoto-1307289824-640x640.jpg);
height: 10rem;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.profile-img {
width: 8rem;
clip-path: circle(60px at center);
margin-top: 4.5rem;
height: 8rem;
}
.name {
font-weight: bold;
font-size: 1.5rem;
}
.description {
flex-grow: 1;
margin: 1rem 2rem;
font-size: 0.9rem;
}
.btn {
width: 100%;
border: none;
font-size: 1rem;
font-weight: bold;
color: white;
padding: 1rem;
background-color: var(--clr-primary);
}
<div class="wrapper-grid">
<div class="container">
<div class='banner-img'></div>
<img src='https://i.pinimg.com/originals/49/09/f9/4909f9e82c492b1e4d52c2bcd9daaf97.jpg' class="profile-img">
<h1 class="name">Slime</h1>
<p class="description">Slimes also commonly called ooze are common types of</p>
<button class='btn'>Attack this dungeon </button>
</div>
<div class="container">
<div class='banner-img'></div>
<img src='https://static.wikia.nocookie.net/kumo-desu-ga-nani-ka/images/4/4c/Mother_1.png/' alt='profile image' class="profile-img">
<h1 class="name">Gaint spider</h1>
<p class="description">This creature shoots sticky strands of webbing from its abdomen which are most commonly found underground, making their lairs on ceilings or in dark, web-filled crevices.</p>
<button class='btn'>Attack this dungeon </button>
</div>
</div>
This seems like an easy question but I've been trying to fix it for a couple of hours now and I still cannot find a solution. I have a box with two columns like in here:
p {
margin: 0;
padding: 0;
margin-right: 2px;
}
.container {
padding: 5px;
width: 90%;
height: 200px;
margin: auto;
border: 1px black solid;
}
.row {
display: flex;
justify-content: space-between;
width: 100%;
}
.half {
width: 50%;
}
.left-col {
display: flex;
}
.right-col {
text-align: right;
}
.tooltip {
position: relative;
border: 1px black solid;
border-radius: 100%;
width: 14px;
height: 14px;
font-size: 12px;
display: flex;
justify-content: center;
align-items: center;
}
<div class="container">
<div class="row">
<div class="half">
<div class="left-col">
<p>Username picked on regitration:</p>
<div class="tooltip">?</div>
</div>
</div>
<div class="half">
<p class="right-col">
John WithLongSurname
</p>
</div>
</div>
</div>
The problem is, that when I open the page on mobiles, the text on the left column is too long and it wraps (which is good), but its width still takes a whole column, so the tooltip is not next to the text but in the center of the box (it sticks to the right side of the column). Example:
I tried to add width: min-content to the "label" class, but then the whole paragraph just collapses to the smallest possible width. How can I adjust the width of the paragraph, so it will take only as much width as it needs to, so the tooltip will always be next to it?
It is because you are using display: flex; for the .left-col class. By default it will distribute the width automatically and evenly.
Try the styling below to see if it works:
p {
margin: 0;
padding: 0;
margin-right: 2px;
}
.container {
padding: 5px;
width: 90%;
height: 200px;
margin: auto;
border: 1px black solid;
}
.row {
display: flex;
justify-content: space-between;
width: 100%;
}
.half {
width: 50%;
}
.left-col {
display: inline;
}
.right-col {
text-align: right;
}
.tooltip {
position: relative;
border: 1px black solid;
border-radius: 100%;
width: 14px;
height: 14px;
font-size: 12px;
display: inline;
}
p.label {
width: auto;
}
<div class="container">
<div class="row">
<div class="half">
<div class="left-col">
<p class="label">Username picked on regitration:
<span class="tooltip">?</span>
</p>
</div>
</div>
<div class="half">
<p class="right-col">
John WithLongSurname
</p>
</div>
</div>
</div>
I think I'm basically there. I've got a DIV at 200px in height and an inner at 150px. This leaves me 50px for the image caption. I want to then vertically center the text within the remaining 50px.
.captioned {
width: 300px;
height: 200px;
display: flex;
margin: 10px;
background-color: #FFFFFF;
border: solid 4px #000000;
border-radius: 0;
box-sizing: border-box;
overflow: hidden;
}
.captioned-inner {
width: 100%;
margin: 0;
}
.preview {
height: 150px;
width: 100%;
}
.preview-image {
height: 100px;
max-width: 100%;
margin-top: 25px;
margin-bottom: 25px;
}
.info {
padding: 5px;
box-sizing: border-box;
height: 50px;
}
.info-inner {
box-sizing: border-box;
}
.name {
font-family: 'Roboto', sans-serif;
font-size: 25px;
display: block;
margin-top: 0;
margin-bottom: 0;
line-height: 1;
overflow-wrap: anywhere;
}
<div class="captioned">
<div class="captioned-inner">
<div class="preview" style="background-color: #DE16C7 !important">
<img class="preview-image" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</div>
<div class="info">
<div class="info-inner">
<p class="name">Google</p>
</div>
</div>
</div>
</div>
I hope the code makes sense for what I'm trying to acheive. I'm wondering how I can go about incorporating the padding in the 50px height unless I should vertically center and pad the text but that seems a worse way to do it.
Just use display:flex and align-items:center to vertically align the text
Also as you have given box-sizing:border-box in .captioned class so it would include the border as well in the 200px height that means
height of the container + top border + bottom border=200px
so the height of .preview container should be 150px - top border(i.e 4px)=146px and for .inner container it will be 50-4 =46px;
This will work for you.
.captioned {
width: 300px;
height: 200px;
display: flex;
margin: 10px;
background-color: #FFFFFF;
border: solid 4px #000000;
border-radius: 0;
box-sizing: border-box;
overflow: hidden;
}
.captioned-inner {
width: 100%;
margin: 0;
}
.preview {
display: flex;
justify-content: center;
align-items: center;
height: 146px;
width: 100%;
}
.preview-image {
height: 100px;
max-width: 100%;
}
.info {
display: flex;
align-items: center;
box-sizing: border-box;
height: 46px;
}
.info-inner {
box-sizing: border-box;
}
.name {
font-family: 'Roboto', sans-serif;
font-size: 25px;
display: block;
margin-top: 0;
margin-bottom: 0;
line-height: 1;
overflow-wrap: anywhere;
}
<div class="captioned">
<div class="captioned-inner">
<div class="preview" style="background-color: #DE16C7 !important">
<img class="preview-image" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</div>
<div class="info">
<div class="info-inner">
<p class="name">Google</p>
</div>
</div>
</div>
</div>
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Best way to center a <div> on a page vertically and horizontally? [duplicate]
(30 answers)
Closed 4 years ago.
I've tried vertical-align: middle; and margin: auto 0; but it doesn't seem to be working? Is there something I'm missing here? My logic is, I put the vertical-align: middle; in the parent container. Shouldn't that center the "children" class into the center vertically? I've also tried adding, padding:auto 0; to the "children" class but that didn't seem to do anything either...
body {
margin: 0;
padding: 0;
}
h1 {
margin: 0;
font-size: 50px;
}
.btn {
border: 4px solid #079992;
padding: 2px 15px;
color: #079992;
font-size: 1.5em;
font-weight: 800;
display: inline-block;
}
.btn:hover {
background-color: #38ada9;
cursor: pointer;
}
.content {
display: block;
background-color: #b2bec3;
text-align: center;
height: 100vh;
font-family: helvetica;
vertical-align: middle;
}
<div class="bg-img">
<div class="content">
<div class="children">
<h1>Random Quote Generator</h1>
<p>Press the button below for an inspirational quote!</p>
<div class="btn">Click Me Bro!</div>
</div>
</div>
</div>
Try to use display:flex here in the parent class .content and margin:auto in .children class to center it horizontally and vertically...
body {
margin: 0;
padding: 0;
}
h1 {
margin: 0;
font-size: 50px;
}
.btn {
border: 4px solid #079992;
padding: 2px 15px;
color: #079992;
font-size: 1.5em;
font-weight: 800;
display: inline-block;
}
.btn:hover {
background-color: #38ada9;
cursor: pointer;
}
.content {
display: flex;
background-color: #b2bec3;
text-align: center;
height: 100vh;
font-family: helvetica;
vertical-align: middle;
}
.content .children {
margin: auto;
}
<body>
<div class="bg-img">
<div class="content">
<div class="children">
<h1>Random Quote Generator</h1>
<p>Press the button below for an inspirational quote!</p>
<div class="btn">Click Me Bro!</div>
</div>
</div>
</div>
</body>
However vertical-align works on tables with display:table-cell...and also you will need to apply vertical-align:middle in the elements itself not in the parent
body {
margin: 0;
padding: 0;
}
h1 {
margin: 0;
font-size: 50px;
}
.btn {
border: 4px solid #079992;
padding: 2px 15px;
color: #079992;
font-size: 1.5em;
font-weight: 800;
display: inline-block;
}
.btn:hover {
background-color: #38ada9;
cursor: pointer;
}
.content {
display: table;
width: 100%;
background-color: #b2bec3;
text-align: center;
height: 100vh;
font-family: helvetica;
}
.content .children {
vertical-align: middle;
display: table-cell;
}
<body>
<div class="bg-img">
<div class="content">
<div class="children">
<h1>Random Quote Generator</h1>
<p>Press the button below for an inspirational quote!</p>
<div class="btn">Click Me Bro!</div>
</div>
</div>
</div>
</body>
body{
margin: 0;
padding: 0;
}
h1{
margin: 0;
font-size: 50px;
}
.btn{
border: 4px solid #079992;
padding: 2px 15px;
color: #079992;
font-size: 1.5em;
font-weight: 800;
display: inline-block;
}
.btn:hover{
background-color: #38ada9;
cursor: pointer;
}
.content{
display: flex;
background-color: #b2bec3;
text-align: center;
height: 100vh;
width:100%;
font-family: helvetica;
justify-content:center;
align-items:center;
}
<div class="bg-img">
<div class="content">
<div class="children">
<h1>Random Quote Generator</h1>
<p>Press the button below for an inspirational quote!</p>
<div class="btn">Click Me Bro!</div>
</div>
</div>
</div>
use flex method to vertical align.
https://jsfiddle.net/raj_mutant/529bcr98/
I have a modal in the center of the screen that has an header.
That header must contain a title and the button to close it.
--------------------------------
| (close)|
| Text |
| |
--------------------------------
So basically I have two requirements:
Every text inside the header must be centred vertically.
Be able to position the "(close)" close to the header in the corner.
Right now I have everything vertically centred but the elements I put inside the header for ma pile:
--------------------------------
| |
| Text |
| (close) |
| |
--------------------------------
.modal-payment__wrapper { // <- this is the whole box
max-width: 50%;
width: 500px;
height: 200px;
background: white;
font-family: 'Lato', 'sans-serif';
}
.modal__header { // <- this is the header
display: flex;
justify-content: center;
flex-direction: column;
width: 100%;
height: 50px;
background-color: black;
color: white;
font-size: 16px;
padding-left: 20px;
}
.modal__header__title { // <- this is "text"
text-transform: uppercase;
letter-spacing: 2px;
font-size: 1.7em;
padding: 10px;
flex-grow: 0;
flex-srhink: 0;
flex-basis: auto;
align-self: auto;
}
<div class="modal-payment__background">
<div class="modal-payment__wrapper">
<div class="modal__header">
<div>
Text
</div>
<div class="modal__header__x"
#click="closeModal">
x
</div>
</div>
<div class="modal__body">
What am I missing?
There were quite a few errors in the code provided, but I think this is what you need. I had to remove the #click since that's not recognized here.
.modal-payment__wrapper {
max-width: 50%;
width: 500px;
height: 200px;
background: white;
font-family: 'Lato', 'sans-serif';
}
.modal__header {
width: 100%;
height: 50px;
background-color: black;
color: white;
font-size: 16px;
padding-left: 20px;
position: relative;
display: flex;
align-items: center;
}
.modal__header__title {
text-transform: uppercase;
letter-spacing: 2px;
font-size: 1.7em;
}
.modal__header__x {
position: absolute;
right: .5em;
top: 0;
}
<div class="modal-payment__background">
<div class="modal-payment__wrapper">
<div class="modal__header">
<div class="modal__header__title">
Text
</div>
<div class="modal__header__x">
x
</div>
</div>
</div>
</div>
Yuo can do it like this. See comments in code to get where you are doing mistakes are what was left.
.modal-payment__wrapper {
max-width: 50%;
width: 500px;
height: 200px;
background: white;
font-family: 'Lato', 'sans-serif';
}
.modal__header {
display: flex; // You need this
justify-content: center;
flex-direction: row; // You need this
width: 100%;
height: 50px;
background-color: black;
color: white;
font-size: 16px;
padding-left: 20px;
}
// You will need below css
.modal__header > div{
justify-content: space-around;
width: 50%;
align-self: center;
}
.modal__header__title { // <- this is "text"
text-transform: uppercase;
letter-spacing: 2px;
font-size: 1.7em;
padding: 10px;
flex-grow: 0;
flex-shrink: 0; // Spelling mistake
flex-basis: auto;
align-self: auto;
}
.modal__header__x{
color: #fff; // You need this
}
<div class="modal-payment__background">
<div class="modal-payment__wrapper">
<div class="modal__header">
<div class="modal__header__title">
Text
</div>
<div class="modal__header__x"
#click="closeModal">
x
</div>
</div>
<div class="modal__body">
BODY
</div> <!-- Missing /div in your code -->
</div> <!-- Missing /div in your code -->
</div> <!-- Missing /div in your code -->