I have been creating a site and noticed that the flex-box justify-content property is having no effect. This is set to center but the flexbox items appear to align at the start of the container's horizontal axis. Not too sure why this is the case. I have set out both the css and HTML that I have used. Any suggestions would be very helpful!
/*General settings*/
#import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,400;1,300&display=swap');
* {
font-family: 'Poppins', sans-serif;
margin: 0;
}
/*nav settings*/
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #0077c2;
width: 100%;
padding: 2vw 0;
flex-wrap: nowrap;
}
.nav-container ul {
list-style: none;
margin-right: 10vw;
}
.nav-container li {
list-style: none;
display: inline-block;
margin-right: 1vw;
}
.logo {
margin-left: 2vw;
color: #fff;
}
.logo :hover {
border: 3px #ff8000 solid;
border-radius: 5px;
}
.nav-link {
text-decoration: none;
color: #fff;
}
.nav-link:hover {
text-decoration: 3px underline #ff8000;
}
/*img section*/
.img-container {
display: flex;
justify-content: center;
margin-top: 5vw;
border: 2px #ff8000 solid;
width: 80%;
margin: 5vh auto;
flex-direction: row;
}
.img-container img {
width: 40%;
margin: 0 auto;
}
.img-container p {
font-size: 0.9rem;
}
<header>
<div class="nav-container">
<div class="logo">
<h1>Development<br>One</h1>
</div>
<div>
<ul>
<li><a class="nav-link" href="#">Home</a></li>
<li><a class="nav-link" href="#">Apple Development</a></li>
<li><a class="nav-link" href="#">Android development</a></li>
<li><a class="nav-link" href="#">About</a></li>
<li><a class="nav-link" href="#">Contact us</a></li>
</ul>
</div>
</div>
</header>
<section class="img-container">
<div>
<h2>Section One Title</h2>
<img src="img/androiddevelopers.png" alt="app-development">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt repellendus nemo eveniet sint. Consectetur error totam nulla ex alias dolorum minus nostrum. Ex est suscipit dolor dolores repellendus! Architecto, ducimus?</p>
</div>
<div>
<h2>Section two Title</h2>
<img src="img/androiddevelopers.png" alt="app-development">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt repellendus nemo eveniet sint. Consectetur error totam nulla ex alias dolorum minus nostrum. Ex est suscipit dolor dolores repellendus! Architecto, ducimus?</p>
</div>
<div>
<h2>Section three Title</h2>
<img src="img/androiddevelopers.png" alt="app-development">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt repellendus nemo eveniet sint. Consectetur error totam nulla ex alias dolorum minus nostrum. Ex est suscipit dolor dolores repellendus! Architecto, ducimus?</p>
</div>
</section>
justify-content: center is working for the .nav-container. You just didn't recognize because the three divs filled out the whole space.
Working example: (with smaller width for demonstration)
/*General settings*/
#import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,400;1,300&display=swap');
* {
font-family: 'Poppins', sans-serif;
margin: 0;
}
/*nav settings*/
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #0077c2;
width: 100%;
padding: 2vw 0;
flex-wrap: nowrap;
}
.nav-container ul {
list-style: none;
margin-right: 10vw;
}
.nav-container li {
list-style: none;
display: inline-block;
margin-right: 1vw;
}
.logo {
margin-left: 2vw;
color: #fff;
}
.logo :hover {
border: 3px #ff8000 solid;
border-radius: 5px;
}
.nav-link {
text-decoration: none;
color: #fff;
}
.nav-link:hover {
text-decoration: 3px underline #ff8000;
}
/*img section*/
.img-container {
display: flex;
justify-content: center;
margin-top: 5vw;
border: 2px #ff8000 solid;
width: 80%;
margin: 5vh auto;
flex-direction: row;
}
.img-container div {
width: 20%;
}
.img-container img {
width: 40%;
margin: 0 auto;
}
.img-container p {
font-size: 0.9rem;
}
<header>
<div class="nav-container">
<div class="logo">
<h1>Development<br>One</h1>
</div>
<div>
<ul>
<li><a class="nav-link" href="#">Home</a></li>
<li><a class="nav-link" href="#">Apple Development</a></li>
<li><a class="nav-link" href="#">Android development</a></li>
<li><a class="nav-link" href="#">About</a></li>
<li><a class="nav-link" href="#">Contact us</a></li>
</ul>
</div>
</div>
</header>
<section class="img-container">
<div>
<h2>Section One Title</h2>
<img src="img/androiddevelopers.png" alt="app-development">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt repellendus nemo eveniet sint. Consectetur error totam nulla ex alias dolorum minus nostrum. Ex est suscipit dolor dolores repellendus! Architecto, ducimus?</p>
</div>
<div>
<h2>Section two Title</h2>
<img src="img/androiddevelopers.png" alt="app-development">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt repellendus nemo eveniet sint. Consectetur error totam nulla ex alias dolorum minus nostrum. Ex est suscipit dolor dolores repellendus! Architecto, ducimus?</p>
</div>
<div>
<h2>Section three Title</h2>
<img src="img/androiddevelopers.png" alt="app-development">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt repellendus nemo eveniet sint. Consectetur error totam nulla ex alias dolorum minus nostrum. Ex est suscipit dolor dolores repellendus! Architecto, ducimus?</p>
</div>
</section>
Related
This question already has an answer here:
Why is a flex item limited to parent size?
(1 answer)
Closed 4 months ago.
So I have a flex container with 2 children. And I want to assign a fixed width to the first child. But If I set width: 200px, for some reason it does not work.
Here's my code:
.carousel {
background-color: #087f5b;
color: white;
padding: 32px;
width: 800px;
display: flex;
gap: 88px;
position: relative;
}
.img-container {
width: 200px;
height: 200px;
border: 1px solid;
}
<div class="carousel">
<div class="img-container"> </div>
<blockquote>
<p class="testimonial-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum,
sapiente labore! Accusantium, voluptas omnis dicta facere, porro
mollitia minus ad ut debitis consequuntur.
</p>
</blockquote>
</div>
However, if I use min-width instead of just width, it works alright.
I also found out that if I delete some text from the blockquote, then it works fine.
.carousel {
background-color: #087f5b;
color: white;
padding: 32px;
width: 800px;
display: flex;
gap: 88px;
position: relative;
}
.img-container {
width: 200px;
height: 200px;
border: 1px solid;
}
.carousel blockquote {
flex: 1;
}
<div class="carousel">
<div class="img-container"> </div>
<blockquote>
<p class="testimonial-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum,
sapiente labore! Accusantium, voluptas omnis dicta facere, porro
mollitia minus ad ut debitis consequuntur.
</p>
</blockquote>
</div>
I have 4 boxes, each with a fontawesome icon, a background for the icon, an h3 and a p with some text. When I hover i want the box and everything inside to scale about 1.1. I've tried adding transition to the boxes class and and scale on hover but it does nothing. I also tried adding these properties to each element inside the box individually. Im using grid to align the boxes horizontally and vertically on mobile. Im not including the media queries.
The first orange box titled "box" is a very basic example of what i want to accomplish with the rest of the boxes.
this is the html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/42f1fd7b3c.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./box.css">
<title>Document</title>
</head>
<body>
<div class="zoom-box">
<div>
<i class="fas fa-phone"></i>
</div>
<h3>box</h3>
<p>box zooms on hover</p>
</div>
<section id="services">
<h1>Services</h1>
<div class="service_grid">
<div class="service_box dlvry">
<div class="truck_back icon_back">
<i class="fas fa-truck fa-3x"></i>
</div>
<h3>Delivery</h3> <br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit fuga quasi molestias error aliquam sint alias cum, praesentium blanditiis amet placeat nemo soluta voluptate. Non ex provident distinctio voluptatem fuga.</p>
</div>
<div class="service_box mnfct">
<div class="industry_back icon_back">
<i class="fas fa-industry fa-3x"></i>
</div>
<h3>Manufacture</h3> <br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias dolor repellendus velit inventore. Nam rerum eligendi libero odit, vero accusantium est placeat provident id animi vitae quaerat dolore fugit unde?</p>
</div>
<div class="service_box mktg">
<div class="bullhorn_back icon_back">
<i class="fas fa-bullhorn fa-3x"></i>
</div>
<h3>Marketing</h3> <br>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti doloribus velit cum molestiae eius accusantium, et debitis sapiente quae culpa, cupiditate eum magni quod quas nam dolorum, hic voluptatum accusamus!</p>
</div>
<div class="service_box merch">
<div class="store_back icon_back">
<i class="fas fa-store fa-3x"></i>
</div>
<h3>Merchandising</h3> <br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum obcaecati nostrum qui incidunt consequatur repellendus, commodi eligendi placeat voluptates! Iste magnam illum debitis modi fugiat aliquam vero unde, minima sequi?</p>
</div>
</div>
</section>
</body>
</html>
this is the css
/* GLOBALS */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
/* EXAMPLE BOX */
.zoom-box {
background-color:#CF4B32;
width: 100px;
height: 100px;
border-radius: 5%;
padding: 5px;
margin: 32px auto;
transition: transform .2s; /* Animation */
}
.zoom-box h3 {
text-align: center;
}
.zoom-box:hover {
transform: scale(1.1);
}
/* EXAMPLE BOX END */
/* BOXES WITH NO HOVER EFFECT */
#services {
background: rgb(0, 0, 17);
min-height: 100vh;
}
#services h1 {
padding: 80px;
color: #fdfffc;
text-align: center;
}
.service_grid {
padding: 0 30px;
display: grid;
gap: 20px;
grid-template-columns: repeat(4, 1fr);
grid-template-areas: 'de mn ma me';
}
.service_box {
margin: 0 auto;
background: #fdfffc;
border-radius: 5%;
padding: 1.5rem 2rem;
max-width: 400px;
text-align: justify;
}
.service_box h3 {
text-align: center;
}
/* ICONS & BACKGROUNDS */
.icon_back {
width: 90px;
height: 90px;
border-radius: 50%;
margin: 0 auto 15px auto;
}
.dlvry {
grid-area: de;
}
.truck_back {
background: #b0def5;
padding: 20px;
}
.fa-truck {
color: #03254c;
}
.mnfct {
grid-area: mn;
}
.industry_back {
background: #f1acac;
padding: 20px;
}
.fa-industry {
color: #b71c1c;
}
.mktg {
grid-area: ma;
}
.bullhorn_back {
background: #fcf088;
padding: 20px;
}
.fa-bullhorn {
color: #fabc20;
}
.merch {
grid-area: me;
}
.store_back {
padding: 17px;
background: #aed581;
}
.fa-store {
color: #33691e;
}
/* ICONS & BACKGROUNDS END */
Using the same code for your example seems to work...
I added/edited this to your CSS:
.service_box {
margin: 0 auto;
background: #fdfffc;
border-radius: 5%;
padding: 1.5rem 2rem;
max-width: 400px;
text-align: justify;
transition: transform .2s; /* Animation */
}
.service_box:hover {
transform: scale(1.1);
}
Working example:
/* GLOBALS */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
/* EXAMPLE BOX */
.zoom-box {
background-color:#CF4B32;
width: 100px;
height: 100px;
border-radius: 5%;
padding: 5px;
margin: 32px auto;
transition: transform .2s; /* Animation */
}
.zoom-box h3 {
text-align: center;
}
.zoom-box:hover {
transform: scale(1.1);
}
/* EXAMPLE BOX END */
/* BOXES WITH NO HOVER EFFECT */
#services {
background: rgb(0, 0, 17);
min-height: 100vh;
}
#services h1 {
padding: 80px;
color: #fdfffc;
text-align: center;
}
.service_grid {
padding: 0 30px;
display: grid;
gap: 20px;
grid-template-columns: repeat(4, 1fr);
grid-template-areas: 'de mn ma me';
}
.service_box {
margin: 0 auto;
background: #fdfffc;
border-radius: 5%;
padding: 1.5rem 2rem;
max-width: 400px;
text-align: justify;
transition: transform .2s; /* Animation */
}
.service_box:hover {
transform: scale(1.1);
}
.service_box h3 {
text-align: center;
}
/* ICONS & BACKGROUNDS */
.icon_back {
width: 90px;
height: 90px;
border-radius: 50%;
margin: 0 auto 15px auto;
}
.dlvry {
grid-area: de;
}
.truck_back {
background: #b0def5;
padding: 20px;
}
.fa-truck {
color: #03254c;
}
.mnfct {
grid-area: mn;
}
.industry_back {
background: #f1acac;
padding: 20px;
}
.fa-industry {
color: #b71c1c;
}
.mktg {
grid-area: ma;
}
.bullhorn_back {
background: #fcf088;
padding: 20px;
}
.fa-bullhorn {
color: #fabc20;
}
.merch {
grid-area: me;
}
.store_back {
padding: 17px;
background: #aed581;
}
.fa-store {
color: #33691e;
}
/* ICONS & BACKGROUNDS END */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/42f1fd7b3c.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./box.css">
<title>Document</title>
</head>
<body>
<div class="zoom-box">
<div>
<i class="fas fa-phone"></i>
</div>
<h3>box</h3>
<p>box zooms on hover</p>
</div>
<section id="services">
<h1>Services</h1>
<div class="service_grid">
<div class="service_box dlvry">
<div class="truck_back icon_back">
<i class="fas fa-truck fa-3x"></i>
</div>
<h3>Delivery</h3> <br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit fuga quasi molestias error aliquam sint alias cum, praesentium blanditiis amet placeat nemo soluta voluptate. Non ex provident distinctio voluptatem fuga.</p>
</div>
<div class="service_box mnfct">
<div class="industry_back icon_back">
<i class="fas fa-industry fa-3x"></i>
</div>
<h3>Manufacture</h3> <br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias dolor repellendus velit inventore. Nam rerum eligendi libero odit, vero accusantium est placeat provident id animi vitae quaerat dolore fugit unde?</p>
</div>
<div class="service_box mktg">
<div class="bullhorn_back icon_back">
<i class="fas fa-bullhorn fa-3x"></i>
</div>
<h3>Marketing</h3> <br>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti doloribus velit cum molestiae eius accusantium, et debitis sapiente quae culpa, cupiditate eum magni quod quas nam dolorum, hic voluptatum accusamus!</p>
</div>
<div class="service_box merch">
<div class="store_back icon_back">
<i class="fas fa-store fa-3x"></i>
</div>
<h3>Merchandising</h3> <br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum obcaecati nostrum qui incidunt consequatur repellendus, commodi eligendi placeat voluptates! Iste magnam illum debitis modi fugiat aliquam vero unde, minima sequi?</p>
</div>
</div>
</section>
</body>
</html>
To scale on hover you should add css code below.
.service_box:hover{
transform: scale(1.1);
}
You can test your code at jsfiddle and add my hover code.
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 5 years ago.
I trie doing different things but can't seem to get rid of the white space between 2 inline-blocks here, thus list is not next to inline-block-div:
.parent {
border: 10px solid red;
}
.list {
border: 5px solid green;
margin-top: 0;
display: inline-block;
width: 25%;
}
.inline-block-div {
border: 5px solid blue;
display: inline-block;
vertical-align: top;
width: 75%;
}
<div class="parent">
<div class="list">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
<div class="inline-block-div">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste pariatur autem ipsam. Quidem beatae ipsum mollitia unde ab vitae consequatur culpa alias accusantium corporis. Sapiente autem voluptatibus sunt asperiores temporibus.</div>
</div>
The space actually comes from HTML. By default space will be added to inline-block elements. I hope you knew to fight the space's. And another issue in your CSS is you forgot to add box-sizing:border-box property.
Without this property width is calculated as follows
width: 75% + border-left-width + border-right-width. So eventually your width is
75%+10px. Your width will be added more if any padding mentioned. Try this code instead
div{
box-sizing:border-box;
}
.parent {
border: 10px solid red;
width:100%
}
.list {
border: 5px solid green;
margin-top: 0;
display: inline-block;
width: 25%;
}
.inline-block-div {
display: inline-block;
vertical-align: top;
width: 75%;
margin-left:-4px;
border:5px solid blue
}
<div class="parent">
<div class="list">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
<div class="inline-block-div">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste pariatur autem ipsam. Quidem beatae ipsum mollitia unde ab vitae consequatur culpa alias accusantium corporis. Sapiente autem voluptatibus sunt asperiores temporibus.</div>
</div>
I recommend to use flex. Flex is very useful to develop.
.parent {
border: 10px solid red;
display: flex;
}
.list {
border: 5px solid green;
margin-top: 0;
display: inline-block;
width: 25%;
}
.inline-block-div {
display: inline-block;
vertical-align: top;
width: 75%;
}
<div class="parent">
<div class="list">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
<div class="inline-block-div">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste pariatur autem ipsam. Quidem beatae ipsum mollitia unde ab vitae consequatur culpa alias accusantium corporis. Sapiente autem voluptatibus sunt asperiores temporibus.</div>
</div>
You can make the parent a flexbox to have it fixed
.parent {
border: 10px solid red;
display: flex;
}
.list {
border: 5px solid green;
margin-top: 0;
display: inline-block;
width: 25%;
}
.inline-block-div {
display: inline-block;
vertical-align: top;
width: 75%;
}
<div class="parent">
<div class="list">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
<div class="inline-block-div">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste pariatur autem ipsam. Quidem beatae ipsum mollitia unde ab vitae consequatur culpa alias accusantium corporis. Sapiente autem voluptatibus sunt asperiores temporibus.</div>
</div>
I am trying to animate the entrance of new rows of content. I am using keyframes animations so I can later add easing. Why are my animated container's contents not animating?
I would expect the contents of each box in the row that is entering the page to expand or be hidden until enough height is available to show it.
I tried to create a stackoverflow snippet, but here is a codepen that seems to work better. https://codepen.io/AlgeoMA/pen/XgKWMq
$('#addMore').click(() => {
$('.row.last').removeClass('last');
let rowClone = $('.container .row:eq(0)').clone();
rowClone.addClass('animating');
$('.rows').append(rowClone);
})
$('#restart').click(() => {
let rowClone = $('.container .row:eq(0)').clone();
$('.rows .row').remove('.row');
$('.rows').append(rowClone);
})
.container .rows {
position: relative;
}
.container .rows .row {
display: flex;
}
.container .rows .row .block {
display: inline-block;
text-align: center;
border: 1px solid gray;
width: 200px;
height: 230px;
}
.container .rows .row .block .name, .container .rows .row .block button {
margin-top: 20px;
}
.container .rows .row .block img {
width: 90px;
height: 90px;
}
.container .rows .row.animating .block {
animation-duration: 1s;
animation-name: slidein;
}
#keyframes slidein {
from {
max-height: 0;
}
to {
max-height: 230px;
}
}
/* -------------------------------------- mostly just cruft below here ----------------------------------- */
#addMore, #restart {
position: fixed;
top: 50px;
left: 50px;
font-size: 14px;
cursor: pointer;
}
#restart {
top: 100px;
}
.bod {
background-color: lightgray;
}
.container {
display: block;
margin: auto;
width: 800px;
min-height: 1000px;
background-color: white;
}
.other-stuff {
font-size: 20px;
line-height: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bod">
<div class="container">
<button id="addMore">Add row</button>
<button id="restart">reboot</button>
<div class="rows">
<div class="row initial">
<div class="block">
<img src="https://files.slack.com/files-tmb/T0FP5QN3G-F5SA2R6UB-775bec889e/pasted_image_at_2017_06_12_12_30_pm_360.png" alt="" />
<div class="name">john doe</div>
<div class="name">stuff stuff stuff stuff stuff</div>
<button>this button does nothing</button>
</div>
<div class="block">
<img src="https://files.slack.com/files-tmb/T0FP5QN3G-F5SA2R6UB-775bec889e/pasted_image_at_2017_06_12_12_30_pm_360.png" alt="" />
<div class="name">john doe</div>
<div class="name">stuff stuff stuff stuff stuff</div>
<button>this button does nothing</button>
</div>
<div class="block">
<img src="https://files.slack.com/files-tmb/T0FP5QN3G-F5SA2R6UB-775bec889e/pasted_image_at_2017_06_12_12_30_pm_360.png" alt="" />
<div class="name">john doe</div>
<div class="name">stuff stuff stuff stuff stuff</div>
<button>this button does nothing</button>
</div>
</div>
</div>
<div class="other-stuff">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo repellendus praesentium, tempora totam accusantium temporibus libero. Cupiditate, eveniet, consectetur sequi, esse reiciendis mollitia enim temporibus minima tenetur fuga voluptas quis?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora reiciendis enim doloribus, perspiciatis excepturi officiis velit non placeat. Consectetur totam molestias ut aliquam enim vero iure sit ipsam magnam facere.</div>
</div>
</div>
The image, text and button should not escape the border as the new row is expanding
Add overflow: hidden to .block
$('#addMore').click(() => {
$('.row.last').removeClass('last');
let rowClone = $('.container .row:eq(0)').clone();
rowClone.addClass('animating');
$('.rows').append(rowClone);
})
$('#restart').click(() => {
let rowClone = $('.container .row:eq(0)').clone();
$('.rows .row').remove('.row');
$('.rows').append(rowClone);
})
.container .rows {
position: relative;
}
.container .rows .row {
display: flex;
}
.container .rows .row .block {
display: inline-block;
text-align: center;
border: 1px solid gray;
width: 200px;
height: 230px;
}
.container .rows .row .block .name, .container .rows .row .block button {
margin-top: 20px;
}
.container .rows .row .block img {
width: 90px;
height: 90px;
}
.container .rows .row.animating .block {
animation-duration: 1s;
animation-name: slidein;
}
#keyframes slidein {
from {
max-height: 0;
}
to {
max-height: 230px;
}
}
/* -------------------------------------- mostly just cruft below here ----------------------------------- */
#addMore, #restart {
position: fixed;
top: 50px;
left: 50px;
font-size: 14px;
cursor: pointer;
}
#restart {
top: 100px;
}
.bod {
background-color: lightgray;
}
.container {
display: block;
margin: auto;
width: 800px;
min-height: 1000px;
background-color: white;
}
.other-stuff {
font-size: 20px;
line-height: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bod">
<div class="container">
<button id="addMore">Add row</button>
<button id="restart">reboot</button>
<div class="rows">
<div class="row initial">
<div class="block">
<img src="https://files.slack.com/files-tmb/T0FP5QN3G-F5SA2R6UB-775bec889e/pasted_image_at_2017_06_12_12_30_pm_360.png" alt="" />
<div class="name">john doe</div>
<div class="name">stuff stuff stuff stuff stuff</div>
<button>this button does nothing</button>
</div>
<div class="block">
<img src="https://files.slack.com/files-tmb/T0FP5QN3G-F5SA2R6UB-775bec889e/pasted_image_at_2017_06_12_12_30_pm_360.png" alt="" />
<div class="name">john doe</div>
<div class="name">stuff stuff stuff stuff stuff</div>
<button>this button does nothing</button>
</div>
<div class="block">
<img src="https://files.slack.com/files-tmb/T0FP5QN3G-F5SA2R6UB-775bec889e/pasted_image_at_2017_06_12_12_30_pm_360.png" alt="" />
<div class="name">john doe</div>
<div class="name">stuff stuff stuff stuff stuff</div>
<button>this button does nothing</button>
</div>
</div>
</div>
<div class="other-stuff">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo repellendus praesentium, tempora totam accusantium temporibus libero. Cupiditate, eveniet, consectetur sequi, esse reiciendis mollitia enim temporibus minima tenetur fuga voluptas quis?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora reiciendis enim doloribus, perspiciatis excepturi officiis velit non placeat. Consectetur totam molestias ut aliquam enim vero iure sit ipsam magnam facere.</div>
</div>
</div>
Currently how it looks on page:
The goal: I'm trying to make the orange buttons set at an equal height regardless of the (blurred) text above it.
Relevant SCSS:
.medium-2 {
padding: .5rem;
background-color: white;
box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.10);
margin-left: 2.5em;
text-align: center;
float: left;
width: 20%;
height: 450px;
h4 {
font-size: 16px;
border: none;
color: #5d5d5d;
font-family: $font-family-sans-serif;
}
p {
padding-bottom: 10%;
}
.button {
text-align: center;
}
}
Is there a non-hacky way to do this? Right now my only fix is to go into the html.erb file and add in some additional padding-down to the smaller block of p to push the orange button down in place.
Flexbox can easily solve this for you.
.content {
height: 200px;
width: 200px;
border: 1px solid;
display: inline-flex;
flex-direction: column;
margin-right: 10px;
}
p {
margin: 0;
}
button {
margin-top: auto;
width: 200px;
}
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit rerum neque laboriosam perspiciatis sapiente optio ipsam ea magni, accusantium eos quaerat ullam facilis hic quo aperiam a iure porro inventore.</p>
<button>Button</button>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet</p>
<button>Button</button>
</div>