I'm not able to find a way to have one table with 4 rows having exactly the same height (without using table tag). This table is included in a div that has table-cell display.
I created this jsbin: https://jsbin.com/jejupogodi/edit?html,output
I want that the pink part to take all the available height and each row inside it should have 25% of the height (whatever the content length is).
I tidied up your code a bit. I used vh (vertical height) instead of percentage. You can run the code snippet but here is a fiddle
.container {
display: table;
width: 100%;
height: 100vh;
background: lightgreen;
}
.focus {
height: 500px;
}
.sliderContainer {
display: table-cell;
width: 40%;
height: 100%;
vertical-align: top;
background-color: white;
}
.slider {
margin: 0px;
padding: 0px;
list-style-type: none;
display: table;
height: 100%;
width: 100%;
}
.slider li {
display: table-row;
cursor: pointer;
height: 25vh;
background-color: pink;
overflow: hidden;
}
li .sliderImg{min-height:5vh; max-height:5vh;}
.sliderDetails {
border-bottom: 1px solid black;
padding-bottom: 5px;
min-height: 20vh;
max-height:20vh;
overflow-y: scroll;
overflow-x: hidden;
}
<body>
<div class="container">
<div class="focus">
<div>
<div class="focusDetails">
<div class="focusTitle"></div>
<div class="focusDesc"></div>
</div>
<div class="previous" style="display:none;"><span></span>
</div>
<div class="next"><span></span>
</div>
</div>
</div>
<div class="sliderContainer">
<ul class="slider">
<li>
<div class="sliderImg"></div>
<div class="sliderDetails">
<p class="sliderTitle">Town Hall Meeting Presentation - Sunstar Italiana</p>
<p class="sliderDesc">On Tuesday, June 30 all Sunstar Italiana employees took part to the Town Hall Meeting presentation made by the General Manager, Marco Bruscaini. Through his</p>
</div>
</li>
<li>
<div class="sliderImg"></div>
<div class="sliderDetails">
<p class="sliderTitle">Top Management Visits the HQ in Etoy</p>
<p class="sliderDesc">The welcome to the Sunstar Headquarter June Meetings' attendees from Asia, Japan, and the US was done as a tour to the Sunstar Campus' two buildings, the new and previous one The welcome to the Sunstar Headquarter June Meetings' attendees
from Asia, Japan, and the US was done as a tour to the Sunstar Campus' two buildings, the new and previous one</p>
</div>
</li>
<li>
<div class="sliderImg"></div>
<div class="sliderDetails">
<p class="sliderTitle">Distributor meeting</p>
<p class="sliderDesc">For the 3rd year we have organized our Distributor meeting taking place this time in our new building in Etoy, Switzerland.This year, we decided to extend our invitation to all the</p>
</div>
</li>
<li>
<div class="sliderImg"></div>
<div class="sliderDetails">
<p class="sliderTitle">Distributor meeting</p>
<p class="sliderDesc">For the 3rd year we have organized our Distributor meeting taking place this time in our new building in Etoy, Switzerland.This year, we decided to extend our invitation to all the</p>
</div>
</li>
</ul>
</div>
</div>
</body>
Solved by flexbox.
https://jsbin.com/yutucapuze/1/edit?output
/* **************
Quick Reset
************** */
html {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
/* **********
Style
********** */
.Rows {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-o-box-orient: horizontal;
-webkit-box-lines: single;
-moz-box-lines: single;
-o-box-lines: single;
-webkit-flex-flow: row nowrap;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
}
.Row {
-webkit-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 0;
margin: 0;
height: 500px;
}
.Slider {
background-color: #333;
position: relative;
}
.Slider:after {
content: '50% width & 500px heigth';
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: 2rem;
color: #3da7b4;
}
.List {
border: 1px solid #000;
}
.Item {
display: block;
min-height: 25%;
height: 25%;
max-height: 25%;
border: 1px solid #000;
position: relative;
overflow: auto;
background-color: #555;
}
.Item:after {
content: '25% heigth';
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: 1rem;
color: #3da7b4;
}
.Item__content {
padding: 0;
margin: 0;
opacity: 0.2;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20);
}
<div class="Rows">
<div class="Row Slider"></div>
<div class="Row List">
<div class="Item">
<p class="Item__content">Lorem ipsum dolor</p>
</div>
<div class="Item">
<p class="Item__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni illum fugiat velit a laborum harum molestias</p>
</div>
<div class="Item">
<p class="Item__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni illum fugiat velit a laborum harum molestias saepe hic rerum. Aut omnis voluptatum placeat, amet aliquam, alias voluptatibus fugiat beatae quibusdam?</p>
</div>
<div class="Item">
<p class="Item__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni illum fugiat velit a laborum harum molestias saepe</p>
</div>
</div>
</div>
Related
I'm trying to make a component that uses both a background color for half of the component and
an image for the other half, with the image acting as an element with a margin. The problem I'm having is that I cannot use display flex to space elements correctly in the content area, it breaks the component with the current solution I'm using and I have no idea why.
I'm specifically trying to position .service__link at the bottom of .service__content. I've tried using paddings/margins to get it in place, but at smaller screen sizes it ends up overflowing out of the box.
*, *::before, *::after {
box-sizing: border-box;
}
* {
padding: 0;
margin: 0;
}
body {
min-height: 100vh;
font-family: Arial;
}
.service-container {
max-width: 1800px;
margin-inline: auto;
padding: 40px 15px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
}
.service {
flex: 1 1 calc(33.3336% - 1.5rem);
display: inline-block;
position: relative;
background: #144088;
min-height: 325px;
border: 2px solid #144088;
color: white;
}
.service::before {
content: "";
float: right;
width: 100%;
height: 100%;
background: url(https://images.unsplash.com/photo-1645069258059-6f5a71256c4a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2076&q=80) left center/150%;
shape-outside: polygon(79% 0, 100% 0, 100% 100%, 42% 100%);
clip-path: polygon(79% 0, 100% 0, 100% 100%, 42% 100%);
shape-margin: .3em;
}
.service::after {
content: "01";
position: absolute;
top: 0;
font-size: 60px;
font-weight: bold;
line-height: 1;
opacity: 25%;
}
.service__content {
padding: 3rem 0 1rem 1rem;
height: 100%;
}
.service__title {
font-size: 26px;
}
.service__description {
font-size: clamp(12px, 3vw + .25rem, 16px);
}
.service__title, .service__description {
margin-bottom: 1rem;
}
.service__link {
display: inline-flex;
justify-content: space-between;
align-items: center;
width: 35%;
}
.service__link a {
color: white;
}
.service__link img {
filter: brightness(0)invert(1);
}
#media screen and (max-width: 1200px) {
.service {
flex: 0 1 518px;
}
}
<body>
<div class="service-container">
<div class="service">
<div class="service__content">
<h4 class="service__title">Lorem</h4>
<p class="service__description">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Placeat doloremque molestiae eligendi voluptas veniam repellendus, aperiam tempora suscipit consectetur sint?</p>
<div class="service__link">
Link
<img src="https://img.icons8.com/ios/26/000000/image.png"/>
</div>
</div>
</div>
<div class="service">
<div class="service__content">
<h4 class="service__title">Lorem</h4>
<p class="service__description">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Placeat doloremque molestiae eligendi voluptas veniam repellendus, aperiam tempora suscipit consectetur sint?</p>
<div class="service__link">
Link
<img src="https://img.icons8.com/ios/26/000000/image.png"/>
</div>
</div>
</div>
<div class="service">
<div class="service__content">
<h4 class="service__title">Lorem</h4>
<p class="service__description">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Placeat doloremque molestiae eligendi voluptas veniam repellendus, aperiam tempora suscipit consectetur sint?</p>
<div class="service__link ">
Link
<img src="https://img.icons8.com/ios/26/000000/image.png"/>
</div>
</div>
</div>
</div>
</body>
What is going on when display: flex is added to .service__content?
Also, if anybody has a better idea of how to make this component in general I'd love to hear it.
Thanks!
I think you could use this:
position: absolute; bottom: 30px
to put it in the bottom part of the div.
If you set service__link to flex instead of inline flex and add margin-top auto it should stay on the bottom
you have to give position : relative for container
than for service__link position: absolute; left:10px; bottom:10px;
there will be no deterioration in smaller screen.
.service__content {
padding: 3rem 0 1rem 1rem;
height: 100%;
position: relative; // Added
}
.service__link {
display: inline-flex;
justify-content: space-between;
align-items: center;
width: 35%;
position: absolute; // Added
left:10px; // Added
bottom:10px; // Added
}
*, *::before, *::after {
box-sizing: border-box;
}
* {
padding: 0;
margin: 0;
}
body {
min-height: 100vh;
font-family: Arial;
}
.service-container {
max-width: 1800px;
margin-inline: auto;
padding: 40px 15px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
}
.service {
flex: 1 1 calc(33.3336% - 1.5rem);
display: inline-block;
position: relative;
background: #144088;
min-height: 325px;
border: 2px solid #144088;
color: white;
}
.service::before {
content: "";
float: right;
width: 100%;
height: 100%;
background: url(https://images.unsplash.com/photo-1645069258059-6f5a71256c4a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2076&q=80) left center/150%;
shape-outside: polygon(79% 0, 100% 0, 100% 100%, 42% 100%);
clip-path: polygon(79% 0, 100% 0, 100% 100%, 42% 100%);
shape-margin: .3em;
}
.service::after {
content: "01";
position: absolute;
top: 0;
font-size: 60px;
font-weight: bold;
line-height: 1;
opacity: 25%;
}
.service__content {
padding: 3rem 0 1rem 1rem;
height: 100%;
position:relative;
}
.service__title {
font-size: 26px;
}
.service__description {
font-size: clamp(12px, 3vw + .25rem, 16px);
}
.service__title, .service__description {
margin-bottom: 1rem;
}
.service__link {
display: inline-flex;
justify-content: space-between;
align-items: center;
width: 35%;
position:absolute;
left:10px;
bottom:10px;
}
.service__link a {
color: white;
}
.service__link img {
filter: brightness(0)invert(1);
}
#media screen and (max-width: 1200px) {
.service {
flex: 0 1 518px;
}
}
<body>
<div class="service-container">
<div class="service">
<div class="service__content">
<h4 class="service__title">Lorem</h4>
<p class="service__description">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Placeat doloremque molestiae eligendi voluptas veniam repellendus, aperiam tempora suscipit consectetur sint?</p>
<div class="service__link">
Link
<img src="https://img.icons8.com/ios/26/000000/image.png"/>
</div>
</div>
</div>
<div class="service">
<div class="service__content">
<h4 class="service__title">Lorem</h4>
<p class="service__description">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Placeat doloremque molestiae eligendi voluptas veniam repellendus, aperiam tempora suscipit consectetur sint?</p>
<div class="service__link">
Link
<img src="https://img.icons8.com/ios/26/000000/image.png"/>
</div>
</div>
</div>
<div class="service">
<div class="service__content">
<h4 class="service__title">Lorem</h4>
<p class="service__description">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Placeat doloremque molestiae eligendi voluptas veniam repellendus, aperiam tempora suscipit consectetur sint?</p>
<div class="service__link ">
Link
<img src="https://img.icons8.com/ios/26/000000/image.png"/>
</div>
</div>
</div>
</div>
</body>
I am doing a side project about a movie website. I designed an RWD navbar as following. When I downsize the screen to the break point which is 576px, the mobile-version navbar would pop up automatically then hide. The result can be seen if running the snippet then expand and collapse the window. I guess the checkbox causes this issue but not really sure. Could someone help me with this issue, please? Thank you!
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Nunito', sans-serif;
}
.wrap {
width: 100%;
}
header {
height: 100px;
background: #000;
padding: 0 10px;
color: #fff;
display: flex;
align-items: center;
position: relative;
}
#checked {
visibility: hidden;
z-index: -9999;
position: absolute;
}
#checked:checked ~.navbar {
right: 0;
}
.logo {
height: 60%;
vertical-align: middle;
}
.navbar{
margin-left: auto;
font-size: 0;
position: fixed;
width: 100%;
height: 100vh;
background: #000;
right: -100%;
top: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
transition: .5s;
z-index: 999;
}
.navbar a {
display: block;
margin: 20px 0;
transition: .4s;
}
.navbar a:hover, .hideBtn:hover {
color: #3498db;
}
.navbar a,
.hideBtn, .showBtn {
font-size: 20px;
padding: 0 10px;
text-decoration: none;
color: #fff;
}
.showBtn {
position: absolute;
top: 37px;
right: 10px;
}
.showcase {
position: relative;
background: url("./image/photo-1517604931442-7e0c8ed2963c.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: calc(100vh - 60px);
display: flex;
justify-content: center;
align-items: center;
}
.showcase .mask {
position: absolute;
width: 100%;
height: 100%;
background-color: #000;
z-index: 1;
opacity: 0.5;
}
.showcase .txt,
.showcase .slogan {
position: absolute;
color: #fff;
z-index: 2;
font-family: 'Nunito', sans-serif;
font-weight: bold;
font-size: 3em;
}
.showcase .slogan {
font-size: 1.2em;
bottom: 35%;
}
.service {
display: grid;
grid-template-rows: repeat(3, 1fr);
background-color: #000;
grid-gap:20px;
padding: 30px 50px;
}
.service a {
display: flex;
width: auto;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
cursor: pointer;
text-decoration: none;
}
.service a img {
width: 30%;
}
.service a p {
color: #fff;
font-size: 1.5em;
font-weight: bolder;
margin: 10px;
}
.content {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: 1fr;
grid-gap: 0px;
}
.content div {
width: 100%;
text-align: center;
font-size: 1.5em;
}
.content div:nth-child(even) {
background-color: #000;
color: #fff;
}
.content div img {
width: 100%;
}
.content div p {
padding: 10px;
}
footer {
display: flex;
flex-direction: column;
width: 100%;
}
.contact-info {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #000;
}
.contact-txt {
display: flex;
flex-flow: column nowrap;
width: 50%;
color: #fff;
}
footer #social-media img{
width: 30px;
margin: 0 5px;
}
.copyright {
text-align: center;
}
#media screen and (min-width: 576px) {
.showBtn, .navbar .hideBtn {
display: none;
}
.navbar{
margin-left: auto;
font-size: 0;
position: relative;
width: auto;
height: 100%;
background: #000;
right: 0;
top: 0;
display: flex;
justify-content: flex-end;
align-items: center;
flex-direction: row;
transition: none;
z-index: 0;
}
.showcase .txt {
font-size: 4em;
}
.showcase .slogan {
font-size: 2em;
}
.service {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: repeat(3, 1fr);
}
.content {
display: grid;
grid-template-rows: repeat(3, 1fr);
}
.content div {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
font-size: 1.2em;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie List</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#600&display=swap" rel="stylesheet">
</head>
<body>
<div class="wrap">
<header>
<img class="logo" src="./image/media.svg" />
<input type="checkbox" id="checked">
<label for="checked" class="showBtn">
<i class="fas fa-bars"></i>
</label>
<nav class="navbar">
About
Explore
Contact us
<label for="checked" class="hideBtn">
<i class="fas fa-times"></i>
</label>
</nav>
</header>
<div class="showcase">
<div class="mask"></div>
<h1 class="txt">HOME CINEMA</h1>
<h2 class="slogan">Experience Cinema at home</h2>
</div>
<div class="service">
<a href="#subscribe-info">
<img src="./image/communications.svg" alt="">
<p>$99 / month</p>
</a>
<a href="#vr-info">
<img src="./image/electronics.svg" alt="">
<p>Virtual Reality</p>
</a>
<a href="#unlimited-info">
<img src="./image/arrows.svg" alt="">
<p>Unlimited Watch</p>
</a>
</div>
<div class="content">
<div id="subscribe-info">
<img src="./image/photo-1543536448-d209d2d13a1c.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis necessitatibus ratione, ut sunt
voluptatibus totam a repudiandae enim nihil beatae ducimus aliquid! Et, beatae reprehenderit aspernatur est
hic commodi expedita.</p>
</div>
<div id="vr-info">
<img src="./image/pexels-photo-3391378.jpeg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque possimus facere ipsum unde saepe maxime
voluptatem tempora sint pariatur at, nobis ipsam necessitatibus similique maiores, reiciendis repudiandae
voluptatum, cumque repellat.</p>
</div>
<div id="unlimited-info">
<img src="./image/pexels-photo-3912397.jpeg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, nesciunt veniam, reprehenderit, fugiat nemo
fugit natus dicta maxime delectus ut quos et mollitia obcaecati pariatur. Rerum minima delectus sint ex?</p>
</div>
</div>
<footer>
<div class="contact-info">
<div class="contact-txt">
<p>hola#jamondetaiwan.com</p>
<p>+886 2771 5412</p>
<p>2F., No. 2, Ln. 179, Kanghu Rd., Neihu Dist., Taipei City 114, Taiwan (R.O.C.)</p>
</div>
<div id="social-media">
<img src="./image/fb.svg" alt="">
<img src="./image/ig.svg" alt="">
<img src="./image/youtube.svg" alt="">
</div>
</div>
<div class="copyright">
</div>
</footer>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
</body>
</html>
This arises due to the CSS transition: .5s; in .navbar; when you reach the breakpoint, you are changing the right position and CSS is animating it. To avoid this, specify the properties you want to animate or add the transition property using JavaScript before you show the menu. For example, using jQuery:
$(".navbar").css("transition", ".5s");
Edit: I missed the CSS selector that is causing the animation and so assumed it was jQuery.
To address the issue with just HTML/CSS, you can create a copy of the navbar and use display: none;. The following snippet should work; I have added a copy of the navbar and added the classes .navbar-big and .navbar-small. This allow us to use the display property to hide the navbar we don't want to show based on the breakpoint, and set transition: right .5s; for .navbar-small.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Nunito', sans-serif;
}
.wrap {
width: 100%;
}
header {
height: 100px;
background: #000;
padding: 0 10px;
color: #fff;
display: flex;
align-items: center;
position: relative;
}
#checked {
visibility: hidden;
z-index: -9999;
position: absolute;
}
#checked:checked ~.navbar {
right: 0;
transition: .5s;
}
.logo {
height: 60%;
vertical-align: middle;
}
.navbar {
margin-left: auto;
font-size: 0;
position: fixed;
width: 100%;
height: 100vh;
background: #000;
right: -100%;
top: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 999;
}
.navbar-small {
transition: right .5s;
}
.navbar-big {
display: none;
}
.navbar a {
display: block;
margin: 20px 0;
transition: .4s;
}
.navbar a:hover, .hideBtn:hover {
color: #3498db;
}
.navbar a,
.hideBtn, .showBtn {
font-size: 20px;
padding: 0 10px;
text-decoration: none;
color: #fff;
}
.showBtn {
position: absolute;
top: 37px;
right: 10px;
}
.showcase {
position: relative;
background: url("./image/photo-1517604931442-7e0c8ed2963c.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: calc(100vh - 60px);
display: flex;
justify-content: center;
align-items: center;
}
.showcase .mask {
position: absolute;
width: 100%;
height: 100%;
background-color: #000;
z-index: 1;
opacity: 0.5;
}
.showcase .txt,
.showcase .slogan {
position: absolute;
color: #fff;
z-index: 2;
font-family: 'Nunito', sans-serif;
font-weight: bold;
font-size: 3em;
}
.showcase .slogan {
font-size: 1.2em;
bottom: 35%;
}
.service {
display: grid;
grid-template-rows: repeat(3, 1fr);
background-color: #000;
grid-gap:20px;
padding: 30px 50px;
}
.service a {
display: flex;
width: auto;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
cursor: pointer;
text-decoration: none;
}
.service a img {
width: 30%;
}
.service a p {
color: #fff;
font-size: 1.5em;
font-weight: bolder;
margin: 10px;
}
.content {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: 1fr;
grid-gap: 0px;
}
.content div {
width: 100%;
text-align: center;
font-size: 1.5em;
}
.content div:nth-child(even) {
background-color: #000;
color: #fff;
}
.content div img {
width: 100%;
}
.content div p {
padding: 10px;
}
footer {
display: flex;
flex-direction: column;
width: 100%;
}
.contact-info {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #000;
}
.contact-txt {
display: flex;
flex-flow: column nowrap;
width: 50%;
color: #fff;
}
footer #social-media img{
width: 30px;
margin: 0 5px;
}
.copyright {
text-align: center;
}
#media screen and (min-width: 576px) {
.showBtn, .navbar .hideBtn {
display: none;
}
.navbar {
margin-left: auto;
font-size: 0;
position: relative;
width: auto;
height: 100%;
background: #000;
right: 0;
top: 0;
display: flex;
justify-content: flex-end;
align-items: center;
flex-direction: row;
transition: none;
z-index: 0;
}
.navbar-small {
display: none;
}
.showcase .txt {
font-size: 4em;
}
.showcase .slogan {
font-size: 2em;
}
.service {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: repeat(3, 1fr);
}
.content {
display: grid;
grid-template-rows: repeat(3, 1fr);
}
.content div {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
font-size: 1.2em;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie List</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#600&display=swap" rel="stylesheet">
</head>
<body>
<div class="wrap">
<header>
<img class="logo" src="./image/media.svg" />
<input type="checkbox" id="checked">
<label for="checked" class="showBtn">
<i class="fas fa-bars"></i>
</label>
<nav class="navbar navbar-big">
About
Explore
Contact us
<label for="checked" class="hideBtn">
<i class="fas fa-times"></i>
</label>
</nav>
<nav class="navbar navbar-small">
About
Explore
Contact us
<label for="checked" class="hideBtn">
<i class="fas fa-times"></i>
</label>
</nav>
</header>
<div class="showcase">
<div class="mask"></div>
<h1 class="txt">HOME CINEMA</h1>
<h2 class="slogan">Experience Cinema at home</h2>
</div>
<div class="service">
<a href="#subscribe-info">
<img src="./image/communications.svg" alt="">
<p>$99 / month</p>
</a>
<a href="#vr-info">
<img src="./image/electronics.svg" alt="">
<p>Virtual Reality</p>
</a>
<a href="#unlimited-info">
<img src="./image/arrows.svg" alt="">
<p>Unlimited Watch</p>
</a>
</div>
<div class="content">
<div id="subscribe-info">
<img src="./image/photo-1543536448-d209d2d13a1c.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis necessitatibus ratione, ut sunt
voluptatibus totam a repudiandae enim nihil beatae ducimus aliquid! Et, beatae reprehenderit aspernatur est
hic commodi expedita.</p>
</div>
<div id="vr-info">
<img src="./image/pexels-photo-3391378.jpeg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque possimus facere ipsum unde saepe maxime
voluptatem tempora sint pariatur at, nobis ipsam necessitatibus similique maiores, reiciendis repudiandae
voluptatum, cumque repellat.</p>
</div>
<div id="unlimited-info">
<img src="./image/pexels-photo-3912397.jpeg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, nesciunt veniam, reprehenderit, fugiat nemo
fugit natus dicta maxime delectus ut quos et mollitia obcaecati pariatur. Rerum minima delectus sint ex?</p>
</div>
</div>
<footer>
<div class="contact-info">
<div class="contact-txt">
<p>hola#jamondetaiwan.com</p>
<p>+886 2771 5412</p>
<p>2F., No. 2, Ln. 179, Kanghu Rd., Neihu Dist., Taipei City 114, Taiwan (R.O.C.)</p>
</div>
<div id="social-media">
<img src="./image/fb.svg" alt="">
<img src="./image/ig.svg" alt="">
<img src="./image/youtube.svg" alt="">
</div>
</div>
<div class="copyright">
</div>
</footer>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
</body>
</html>
Forgive my if my html and css is bad this is my first page im doing alone. I have been working on this issue for atleast 3 hours I have my index page complete looks halfway decent but when I commit it to github and view it on my sons iphone the images look squished and the aspect ratio is off. If I can have any help thanks in advance!!
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA Compatible" content="ie=edge" />
<link rel="stylesheet" href="css/stylesheet.css" />
<title>RealtorsRUs</title>
</head>
<body>
<!-- Begin Navbar -->
<header class="hero">
<div id="navbar" class="navbar">
<h1 class="logo">
MReality
</h1>
<nav>
<ul>
<li>
<a class="current" href="index.html">Home</a></li>
<li>
About Us</li>
<li>
Contact Us</li>
</ul>
</nav>
</div>
<!-- End Navbar -->
<div class="content">
<h1>Welcome Home</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque vero
excepturi dolore sequi quibusdam nostrum aperiam voluptatum nihil
deserunt explicabo!
</p>
Read More
</div>
</header>
<main>
<!-- Begin Featured Listings -->
<section class="featuredlistings">
<h2>Featured Listings</h2>
<div class="flex-row">
<div class="item1">
<img
src="images/evelyn-paris-XJnP4L958ds-unsplash.jpg"
alt="Home"
/>
</div>
<div class="item2">
<img
src="images/jesse-roberts-561igiTyvSk-unsplash.jpg"
alt="Home"
/>
</div>
<div class="item3">
<img
src="images/daniel-barnes-RKdLlTyjm5g-unsplash.jpg"
alt="Home"
/>
</div>
</section>
<article id="section-1" class="flex-row-article">
<div class="article-1">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore mollitia, ipsa neque aliquid quod similique consequatur accusantium harum facere natus. Omnis blanditiis incidunt nobis similique reprehenderit illo quaerat, sed ad reiciendis fugit sequi molestias, inventore, exercitationem consectetur soluta. Quibusdam quod laborum eaque, perferendis fugit similique dolorem ipsum mollitia sunt incidunt?
</p>
</div>
<div class="article-2">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam ut dignissimos vitae voluptatum, obcaecati quidem, eaque, amet cum illo eos numquam iste officiis quia aspernatur animi dicta consectetur nulla eligendi! Laboriosam quas sunt dolor dignissimos illo at porro asperiores, earum, cum sapiente voluptates nemo animi dolore repellat libero cupiditate nulla?
</p>
</div>
</article>
</main>
<footer id="mainfooter">
<p>MReality © 2020, All Rights Reserved</p>
</footer>
</body>
</html>
enter code here
css
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.btn {
cursor: pointer;
display: inline-block;
padding: 10px 60px;
color: #fff;
border: none;
border-radius: 5px;
background-color: #333;
font-size: 20px;
opacity: .95;
}
.flex-row {
display: flex;
text-align: center;
justify-content: center;
}
.flex-row div{
margin: 5px;
display: flex;
}
.flex-row h3{
font-size: 3rem;
}
.flex-row-article {
display: flex;
text-align: center;
justify-content: center;
flex-direction: column;
}
body {
background: #f9f9f9;
color: #333;
line-height: 1.6;
}
ul {
list-style: none;
}
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #333;
color: #fff;
height: 50px;
width: 100%;
padding: 5px;
position: fixed;
top: 0px;
opacity: 0.9;
z-index: 2;
}
.navbar a {
color: #fff;
padding: 10px 10px;
margin: 0 5px;
}
.navbar a:hover {
border-bottom: #fff 2px solid;
}
.navbar ul {
display: flex;
position: sticky;
top: 0;
}
img {
max-width: 100%;
}
.logo{
font-size: 1.5rem;
}
a {
text-decoration: none;
color: #333;
}
.hero-aboutus {
background: url("../images/roger-starnes-sr-BNY7m7BhS2o-unsplash.jpg") no-repeat center
center/cover;
height: 100vh;
text-align: center;
}
.hero-contactus {
background: url("../images/bailey-anselme-Bkp3gLygyeA-unsplash\ \(2\).jpg")
no-repeat center center/cover;
height: 100vh;
text-align: center;
background-position-y: 40%;
}
.hero {
background: url("../images/francesca-tosolini-XAHSexPxSus-unsplash\ \(1\).jpg")
no-repeat center center/cover;
height: 100vh;
text-align: center;
position: relative;
width: 100%;
overflow: hidden;
}
.hero .content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 100%;
color: #fff;
}
.hero .content h1 {
font-size: 3rem;
z-index: 1;
}
.hero .content p {
font-size: 1.5rem;
width: 100%;
margin: 10px 30px;
padding: 0 20px;
z-index: 1;
}
.hero:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.1);
}
.featuredlistings h2{
text-align: center;
font-size: 2rem;
margin: 5px;
padding: 10px;
}
.article-1 p, .article-2 p{
margin: 0 auto;
padding: 10px;
text-align: center;
font-size: 1.5rem;
width: 50%;
}
#mainfooter p{
text-align: center;
background: #333;
color: #fff;
padding: 20px;
}
#media(max-width: 768px) {
.navbar {
flex-direction: column;
height: 80px;
padding: 20px;
z-index: 100;
align-items: center;
justify-content: center;
}
.navbar a {
padding: 10px 10px;
margin: 0 3px;
}
.flex-row{
flex-wrap: wrap;
}
.featuredlistings h2{
text-align: center;
font-size: 2rem;
}
.article-1 p, .article-2 p{
margin: 0 auto;
padding: 10px;
text-align: center;
font-size: 1.5rem;
width: 100%;
}
img{
flex: 1;
}
.flex-row .item1 .item2 .item3{
Your problem may be fairly easy to solve. May be, as I am not on Safari, but IE11 seems to have the same problem.
Solution
img: { max-width: 100% } should be img: { width: 100% }. Because element width and height are CSS default auto, which means that the browser will try to fill all the space available with the image, fully disregarding its ratio (it stretches in every direction). width: 100% (OR height: 100%, not both!) will make sure that images fill the full width (OR height) of the available space and size its height (OR width) to ratio.
#media screen and (max-width: 768px) { .... img { flex: 1 } .... } should become #media screen and (max-width: 768px) { .... img { flex-grow: 1 } .... }. Especially IE11 cannot handle the shorthand property flex very well, so you need the individual properties instead CSS flex Property. I am not sure, but Safari may have the same problem (may need the vendor prefix -webkit-).
Before, IE11 did not show the images at all with a browser window smaller than 768px and did not preserve the image ratios when resizing, but with my changes everything works as expected. Hopefully, Safari too!
BTW Chrome, Edge and Firefox did not show the problem on W10.
The snippet (code copied from your Github site) with the two changes.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.btn {
cursor: pointer;
display: inline-block;
padding: 10px 60px;
color: #fff;
border: none;
border-radius: 5px;
background-color: #333;
font-size: 20px;
opacity: 0.95;
}
.flex-row {
display: flex;
text-align: center;
justify-content: center;
}
.flex-row div {
margin: 5px;
display: flex;
}
.flex-row h3 {
font-size: 3rem;
}
.flex-row-article {
display: flex;
text-align: center;
justify-content: center;
flex-direction: column;
}
body {
background: #f9f9f9;
color: #333;
line-height: 1.6;
}
ul {
list-style: none;
}
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #333;
color: #fff;
height: 50px;
width: 100%;
padding: 5px;
position: fixed;
top: 0px;
opacity: 0.9;
z-index: 2;
}
.navbar a {
color: #fff;
padding: 10px 10px;
margin: 0 5px;
}
.navbar a:hover {
border-bottom: #fff 2px solid;
}
.navbar ul {
display: flex;
position: sticky;
top: 0;
}
.navbar h1 {}
img {
/* max-width: 100%;/* REMOVED */
width: 100%;
}
.logo {
font-size: 1.5rem;
position: relative;
}
a {
text-decoration: none;
color: #333;
}
.hero-aboutus {
background: url("https://amolina0116.github.io/MyProjects/realtorsite/images/roger-starnes-sr-BNY7m7BhS2o-unsplash.jpg") no-repeat center center/cover;
height: 100vh;
text-align: center;
}
.hero-contactus {
background: url("https://amolina0116.github.io/MyProjects/realtorsite/images/bailey-anselme-Bkp3gLygyeA-unsplash\ \(2\).jpg") no-repeat center center/cover;
height: 100vh;
text-align: center;
background-position-y: 40%;
}
.hero {
background: url("https://amolina0116.github.io/MyProjects/realtorsite/images/francesca-tosolini-XAHSexPxSus-unsplash\ \(1\).jpg") no-repeat center center/cover;
height: 100vh;
text-align: center;
position: relative;
width: 100%;
overflow: hidden;
}
.hero .content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 100%;
color: #fff;
}
.hero .content h1 {
font-size: 3rem;
z-index: 1;
}
.hero .content p {
font-size: 1.5rem;
width: 100%;
margin: 10px 30px;
padding: 0 20px;
z-index: 1;
}
.hero:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.1);
}
.featuredlistings h2 {
text-align: center;
font-size: 2rem;
margin: 5px;
padding: 10px;
}
.article-1 p,
.article-2 p {
margin: 0 auto;
padding: 10px;
text-align: center;
font-size: 1.5rem;
width: 50%;
}
#mainfooter {
height: 50px;
background: #333;
text-align: center;
color: #fff;
width: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
#mainfooter p {}
.ourteam {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
color: #fff;
}
.fred {
background: #333;
opacity: 0.9;
margin: 5px;
padding: 10px;
/* height: ; /**/
}
.fred img {
height: 200px;
border-radius: 50%;
}
.sammy {
background: #333;
opacity: 0.9;
margin: 5px;
padding: 10px;
}
.sammy img {
border-radius: 50%;
}
.box {
display: flex;
align-items: center;
text-align: center;
justify-content: center;
align-content: center;
height: 100%;
background: #333;
color: #fff;
padding: 10px;
}
.box1 {
border-right: black solid 1px;
width: 33.3%;
}
.box2 {
width: 33.3%;
}
.box3 {
border-left: black solid 1px;
width: 33.3%;
}
input[type="text"],
select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type="submit"] {
background-color: #4caf50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
position: relative;
top: 30%;
opacity: 0.85;
margin: 0 30%;
}
.contactform {
height: 60vh;
}
#subject {
height: 100px;
}
#media screen and (max-width: 768px) {
#icons {
display: none;
}
.contactform {
width: 100%;
line-height: 0.5;
}
.container {
margin: 0 auto;
top: 80px;
}
.fred {
position: relative;
top: 40px;
}
.navbar {
flex-direction: column;
height: 80px;
padding: 20px;
z-index: 100;
align-items: center;
justify-content: center;
}
.flex-row {
flex-wrap: wrap;
}
.featuredlistings h2 {
text-align: center;
font-size: 2rem;
}
.article-1 p,
.article-2 p {
margin: 0 auto;
padding: 10px;
text-align: center;
font-size: 1.5rem;
width: 100%;
}
img {
flex-grow: 1;
/* MODDED, was flex: 1 */
}
.fred img {
height: 80px;
}
}
.sammy img {}
<!-- Begin Navbar -->
<header class="hero">
<div id="navbar" class="navbar">
<h1 class="logo">
MReality
</h1>
<nav>
<ul>
<li>
<a class="current" href="index.html">Home</a>
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</nav>
</div>
<!-- End Navbar -->
<div class="content">
<h1>Welcome Home</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque vero excepturi dolore sequi quibusdam nostrum aperiam voluptatum nihil deserunt explicabo!
</p>
Read More
</div>
</header>
<main>
<!-- Begin Featured Listings -->
<section class="featuredlistings">
<h2>Featured Listings</h2>
<div class="flex-row">
<div class="item1">
<img src="https://amolina0116.github.io/MyProjects/realtorsite/images/evelyn-paris-XJnP4L958ds-unsplash.jpg" alt="Home" />
</div>
<div class="item2">
<img src="https://amolina0116.github.io/MyProjects/realtorsite/images/jesse-roberts-561igiTyvSk-unsplash.jpg" alt="Home" />
</div>
<div class="item3">
<img src="https://amolina0116.github.io/MyProjects/realtorsite/images/daniel-barnes-RKdLlTyjm5g-unsplash.jpg" alt="Home" />
</div>
</div>
</section>
<article id="section-1" class="flex-row-article">
<div class="article-1">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore mollitia, ipsa neque aliquid quod similique consequatur accusantium harum facere natus. Omnis blanditiis incidunt nobis similique reprehenderit illo quaerat, sed ad reiciendis fugit sequi
molestias, inventore, exercitationem consectetur soluta. Quibusdam quod laborum eaque, perferendis fugit similique dolorem ipsum mollitia sunt incidunt?
</p>
</div>
<div class="article-2">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam ut dignissimos vitae voluptatum, obcaecati quidem, eaque, amet cum illo eos numquam iste officiis quia aspernatur animi dicta consectetur nulla eligendi! Laboriosam quas sunt dolor dignissimos
illo at porro asperiores, earum, cum sapiente voluptates nemo animi dolore repellat libero cupiditate nulla?
</p>
</div>
</article>
</main>
<footer id="mainfooter">
<p>MReality © 2020, All Rights Reserved</p>
</footer>
I need to set a welcome section like the following:
I have set an absolute position just for the image, but I cannot make the image keeps horizontally align with the other column. Any ideas?
My code:
.img-welcome{
position: absolute;
top:10%;
right: 0;
bottom: 0;
margin: auto;
align-items: center;
display: flex;
height: max-content;
}
.container-relative{
position: relative;
height: 100%;
padding-bottom: 50px;
}
<div className='welcome-container d-flex align-items-center'>
<div className='container'>
<div className='pt-5 text-left pb-5 container-relative'>
<div class="col-6 pt-5 mb-5">
<h1 class="mb-3 row h1-text-style">Combine all your credit cards in one place</h1>
<h3 class="mb-5 row h3-text-style">We alow you to connect diferent bank cards, in one system, in which you will have the opportunity to manage to financial data and track the statistics of your costs.</h3>
<a class="button-gradient" href="#">Get Started</a>
</div>
</div>
</div>
<div class="img-welcome">
<img className='w-100' src={require('./img/img2.png')}></img>
</div>
</div>
You can use flexbox to easily achieve this.
You just need a container and the two sides:
body {
background-image: linear-gradient(to right, #00b795 , #0092a2);
height: 100vh;
margin: 0;
padding: 0;
}
.container {
height: 100%;
display: flex;
align-items: center;
}
.container > div {
flex: 50%;
}
.left {
padding: 20px;
font-family: Arial, Helvetica, sans-serif;
color: white;
display: flex;
flex-direction: column;
}
.right img {
height: 80vh;
width: 100%;
}
<div class="container">
<div class="left">
<strong>Combine all your credit cards in one place</strong>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laborum architecto repellendus deserunt ex quo impedit in blanditiis facere, nisi quos, excepturi doloribus fuga expedita amet.</p>
</div>
<div class="right">
<img src="https://startbootstrap.com/assets/img/screenshots/themes/sb-admin-2.png">
</div>
</div>
This question already has an answer here:
Pin a flex item to the bottom of the container
(1 answer)
Closed 5 years ago.
I have a series of cards using flexbox, and I'd like to have the bottom element (in this case a podcast widget) align to the bottom (flex-end) while the others align to the top.
I am fairly new to front-end web development and feel a bit like I'm just missing some fundamental idea to getting this to work. Thanks for your help!
Here is my current codepen where I'd like to get that to stick to the bottom.
html,
body {
font-family: sans-serif;
font-size: 16px;
}
/* Typography and Helpers */
.text-right {
text-align: right;
}
/* layout */
section {
display: block;
padding: 2rem 0;
}
.container {
width: 1200px;
max-width: 1200px;
margin: 0 auto;
position: relative;
}
.columns {
display: flex;
margin-left: -0.75rem;
margin-right: -0.75rem;
margin-top: -0.75rem;
/* - margins are for nesting */
}
.columns:last-child {
margin-bottom: -0.75rem;
}
.columns:not(:last-child) {
margin-bottom: 0.75rem;
}
.column {
display: block;
-ms-flex-preferred-size: 0;
flex-basis: 0;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
padding: 0.75rem;
}
.align-bottom-container {
margin-top: auto;
align-items: flex-end;
}
.align-bottom-item {
margin-top: auto;
display: block;
}
/* layout alignment */
.align-items-bottom {
align-items: flex-end;
display: flex;
justify-content: center;
}
.flex {
display: flex;
}
/* cards */
.flex-card {
border-left: .5em solid #0093d0;
background-color: #f7f7f7;
padding: 1em 1em 0 1em;
}
.two {
width: 50%;
flex-basis: 50%;
min-width: 50%;
}
.card-content {
padding: 1.5rem;
}
.blog-category {}
.blog-title {}
.blog-meta {}
.blog-description {}
<section class="container">
<div class="columns">
<div class="column">
<div class="flex-card">
<div class="card-content">
<p class="blog-category">Expert Strategies</p>
<div class="columns">
<p class="column blog-title">Pivot to Purchase</p>
<p class="column blog-meta text-right">August 8, 2017 <br>Podcast #18</p>
</div>
<p class="blog-description">If technology can be a disruptor - it will. Zillow has a pilot program that...</p>
<button>Read More</button>
</div>
</div>
<footer class="align-bottom-container">
<a class="spreaker-player" href="https://www.spreaker.com/user/kellyguest/expert-strategies-audit-your-brand" data-resource="episode_id=11390290" data-theme="light" data-autoplay="false" data-playlist="false" data-width="100%" data-height="200px">Listen to "Expert Strategies: Audit Your Brand" on Spreaker.</a>
<script async src="https://widget.spreaker.com/widgets.js"></script>
</footer>
</div>
<div class="column">
<div class="flex-card">
<div class="card-content">
<p class="blog-category">Expert Strategies</p>
<div class="columns">
<p class="column blog-title">Pivot to Purchase</p>
<p class="column blog-meta text-right">August 8, 2017 <br>Podcast #18</p>
</div>
<p class="blog-description">
<div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus voluptatibus provident inventore velit impedit maxime asperiores consequuntur, ex veritatis libero aspernatur itaque quidem, harum accusamus dolorem, vel similique delectus
distinctio.
</div>
</p>
<button>Read More</button>
</div>
</div>
<footer><a class="spreaker-player" href="https://www.spreaker.com/user/kellyguest/expert-strategies-audit-your-brand" data-resource="episode_id=11390290" data-theme="light" data-autoplay="false" data-playlist="false" data-width="100%" data-height="200px">Listen to "Expert Strategies: Audit Your Brand" on Spreaker.</a>
<script async src="https://widget.spreaker.com/widgets.js"></script>
</footer>
</div>
</div>
</section>
The flex property of align-items: flex-end; belongs to the parent of flex items you are trying to align, the problem here is that you are trying to apply this property to your "footer", which is a child of what you assume is your flex parent. The parent of your footer is in fact the .column class which has the property of display: block;.
To achieve what you desire will only require the addition of these two lines to your .column class
display: flex;
flex-direction: column;
Which will then enable your margin-top: 0; property to take effect.
An alternative is to use the property justify-content: flex-end; which belongs to the parent of flex items/children. So your footer will align to the end of your parent. And then using the property margin-bottom: 0; on the flex-card to "float" it away from the footer.
.column {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.flex-card {
margin-bottom: auto;
border-left: .5em solid #0093d0;
background-color: #f7f7f7;
padding: 1em 1em 0 1em;
}
html,
body {
font-family: sans-serif;
font-size: 16px;
}
/* Typography and Helpers */
.text-right {
text-align: right;
}
/* layout */
section {
display: block;
padding: 2rem 0;
}
.container {
width: 1200px;
max-width: 1200px;
margin: 0 auto;
position: relative;
}
.columns {
display: flex;
margin-left: -0.75rem;
margin-right: -0.75rem;
margin-top: -0.75rem;
/* - margins are for nesting */
}
.columns:last-child {
margin-bottom: -0.75rem;
}
.columns:not(:last-child) {
margin-bottom: 0.75rem;
}
.column {
display: flex;
flex-direction: column;
-ms-flex-preferred-size: 0;
flex-basis: 0;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
padding: 0.75rem;
}
.align-bottom-container {
margin-top: auto;
align-items: flex-end;
}
.align-bottom-item {
margin-top: auto;
display: block;
}
/* layout alignment */
.align-items-bottom {
display: flex;
justify-content: center;
}
.flex {
display: flex;
}
/* cards */
.flex-card {
border-left: .5em solid #0093d0;
background-color: #f7f7f7;
padding: 1em 1em 0 1em;
}
.two {
width: 50%;
flex-basis: 50%;
min-width: 50%;
}
.card-content {
padding: 1.5rem;
}
.blog-category {}
.blog-title {}
.blog-meta {}
.blog-description {}
<section class="container">
<div class="columns">
<div class="column">
<div class="flex-card">
<div class="card-content">
<p class="blog-category">Expert Strategies</p>
<div class="columns">
<p class="column blog-title">Pivot to Purchase</p>
<p class="column blog-meta text-right">August 8, 2017 <br>Podcast #18</p>
</div>
<p class="blog-description">If technology can be a disruptor - it will. Zillow has a pilot program that...</p>
<button>Read More</button>
</div>
</div>
<footer class="align-bottom-container">
<a class="spreaker-player" href="https://www.spreaker.com/user/kellyguest/expert-strategies-audit-your-brand" data-resource="episode_id=11390290" data-theme="light" data-autoplay="false" data-playlist="false" data-width="100%" data-height="200px">Listen to "Expert Strategies: Audit Your Brand" on Spreaker.</a>
<script async src="https://widget.spreaker.com/widgets.js"></script>
</footer>
</div>
<div class="column">
<div class="flex-card">
<div class="card-content">
<p class="blog-category">Expert Strategies</p>
<div class="columns">
<p class="column blog-title">Pivot to Purchase</p>
<p class="column blog-meta text-right">August 8, 2017 <br>Podcast #18</p>
</div>
<p class="blog-description">
<div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus voluptatibus provident inventore velit impedit maxime asperiores consequuntur, ex veritatis libero aspernatur itaque quidem, harum accusamus dolorem, vel similique delectus
distinctio.
</div>
</p>
<button>Read More</button>
</div>
</div>
<footer><a class="spreaker-player" href="https://www.spreaker.com/user/kellyguest/expert-strategies-audit-your-brand" data-resource="episode_id=11390290" data-theme="light" data-autoplay="false" data-playlist="false" data-width="100%" data-height="200px">Listen to "Expert Strategies: Audit Your Brand" on Spreaker.</a>
<script async src="https://widget.spreaker.com/widgets.js"></script>
</footer>
</div>
</div>
</section>