I did try a few suggestions that I found online but none of them worked. I tried to fix the footer at the bottom using Flexbox layout but it didn't work, when I add more cards they overflow and go past the footer. I also followed this answer and added the two properties to my main page, but the problem is card-container does not expand to fit the content (it display has to flex) and only the main div (for whole page) does.
Do you have any suggestions or workarounds for this issue?
/* RESET */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #ebecf0;
font-family: "Open Sans", sans-serif;
min-height: 100vh;
}
body a {
text-decoration: none;
color: #172b4d;
}
body h1 {
font-family: "Song Myung", serif;
}
/* DEFAULT STYLE */
:root {
font-size: 16px;
--card-img-height: 200px;
}
.card-container {
width: 100%;
height: 100vh;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
transition: all 200ms ease-in-out;
}
.card {
align-self: flex-start;
position: relative;
width: 325px;
min-width: 275px;
margin: 1.25rem 0.75rem;
background: white;
transition: all 300ms ease-in-out;
}
.card .card-img {
visibility: hidden;
width: 100%;
height: var(--card-img-height);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.card .card-img-hovered {
--card-img-hovered-overlay: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
transition: all 350ms ease-in-out;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
width: 100%;
position: absolute;
height: var(--card-img-height);
top: 0;
}
.card .card-info {
position: relative;
padding: 0.75rem 1.25rem;
transition: all 200ms ease-in-out;
}
.card .card-info .card-about {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 0;
transition: all 200ms ease-in-out;
}
.card .card-info .card-about .card-tag {
width: 60px;
max-width: 100px;
padding: 0.2rem 0.5rem;
font-size: 12px;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
background: #505f79;
color: #fff;
}
.card .card-info .card-about .card-tag.tag-news {
background: #36b37e;
}
.card .card-info .card-about .card-tag.tag-deals {
background: #ffab00;
}
.card .card-info .card-about .card-tag.tag-politics {
width: 71px;
background: #ff5630;
}
.card .card-info .card-title {
z-index: 10;
font-size: 1.5rem;
padding-bottom: 0.75rem;
transition: all 350ms ease-in-out;
}
.card .card-info .card-creator {
padding-bottom: 0.75rem;
transition: all 250ms ease-in-out;
}
.card:hover {
cursor: pointer;
box-shadow: 0px 15px 35px rgba(227, 252, 239, 0.1), 0px 5px 15px rgba(0, 0, 0, 0.07);
transform: scale(1.025);
}
.card:hover .card-img-hovered {
--card-img-hovered-overlay: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.65));
height: 100%;
}
.card:hover .card-about, .card:hover .card-creator {
opacity: 0;
}
.card:hover .card-info {
background-color: transparent;
}
.card:hover .card-title {
color: #ebecf0;
transform: translate(0, 40px);
}
.card-1 .card-img, .card-1 .card-img-hovered {
background-image: var(--card-img-hovered-overlay), url(https://source.unsplash.com/Qm_n6aoYzDs);
}
.card-2 .card-img, .card-2 .card-img-hovered {
background-image: var(--card-img-hovered-overlay), url(https://source.unsplash.com/C-v1p2DTakA);
}
.card-3 .card-img, .card-3 .card-img-hovered {
background-image: var(--card-img-hovered-overlay), url(https://source.unsplash.com/V0L1LH7qWOQ);
}
.card-4 .card-img, .card-4 .card-img-hovered {
background-image: var(--card-img-hovered-overlay), url(https://source.unsplash.com/zAi2Is48-MA);
}
.page-footer{
height: 3rem;
background: #cddc39;
color: var(--primary-900);
display: flex;
align-items: center;
justify-content: center;
letter-spacing: var(--letterSpacing);
}
.page-footer p{
font-size: 0.8rem;
margin-bottom: 0;
}
.footer-logo, .page-footer a{
color: #0f5132;
}
.columned-footer {
display: flex;
align-items: center;
justify-content: space-around;
padding-inline-start: 0.1rem;
background-color: rgb(70, 66, 66);
height: 8rem;
color: rgb(243, 240, 235);
width: 100%;
}
.social {
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(70, 66, 66);
height: 5rem;
border-top: 0.1rem solid;
border-top-color: rgb(102, 99, 99);
}
.social_footer_ul {
display:table;
margin:10px auto 0 auto;
list-style-type:none;
padding: 10px 15px;
}
.social_footer_ul li {
font-size: 30px;
padding-left:20px;
float:left;
}
.social_footer_ul li a {
padding:15px;
color: #e2e0ff;
}
.social_footer_ul li a:hover {
opacity: 0.2px;
color: #cddc39;
}
.social_footer_ul li i {
width:20px;
height:20px;
text-align:center;
}
.footer-container {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
display: grid;
gap: 10rem;
grid-template-columns: 1fr 1fr;
padding-inline-start: 2rem;
}
.line {
height: 2px;
width: 80px;
background-color: #cddc39;
margin: 3px 0px;
padding: 0px;
}
.streak {
height:2px;
width: 300px;
background-color: #acb930;
display: block;
margin: 5px 50px;
padding: 1px;
}
.address {
float: right;
}
.tel {
float: left;
}
@media screen and (min-width: 748px) {
.footer-container{
width: 100%;
padding-inline-start: 5rem;
}
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
body > *{
flex-grow: 0;
}
body > nav + .card-container {
flex-grow: 1;
}<div class="card-container">
<div class="card card-1">
<div class="card-img"></div>
<a href="" class="card-link">
<div class="card-img-hovered"></div>
</a>
<div class="card-info">
<div class="card-about">
<a class="card-tag tag-news">NEWS</a>
<div class="card-time">6/11/2018</div>
</div>
<h1 class="card-title">There have been big Tesla accident at New Jersey</h1>
<div class="card-creator">by <a href="">Sardorbek Usmonov</a></div>
</div>
</div>
<div class="card card-2">
<div class="card-img"></div>
<a href="" class="card-link">
<div class="card-img-hovered"></div>
</a>
<div class="card-info">
<div class="card-about">
<a class="card-tag">Tech</a>
<div class="card-time">6/07/2018</div>
</div>
<h1 class="card-title">Samsung laptops is exploding again</h1>
<div class="card-creator">by <a href="">Tyler Platt</a></div>
</div>
</div>
<div class="card card-3">
<div class="card-img"></div>
<a href="" class="card-link">
<div class="card-img-hovered"></div>
</a>
<div class="card-info">
<div class="card-about">
<a class="card-tag tag-deals">Deals</a>
<div class="card-time">5/27/2018</div>
</div>
<h1 class="card-title">Apple is having big Sale for the first time</h1>
<div class="card-creator">by <a href="">Timur Mirzoyev</a></div>
</div>
</div>
<div class="card card-4">
<div class="card-img"></div>
<a href="" class="card-link">
<div class="card-img-hovered"></div>
</a>
<div class="card-info">
<div class="card-about">
<a class="card-tag tag-politics">Politics</a>
<div class="card-time">5/20/2018</div>
</div>
<h1 class="card-title">Net-Nutrality is coming to its end</h1>
<div class="card-creator">by <a href="">Gregoy Trem</a></div>
</div>
</div>
</div>
<footer>
<div class="social">
<ul class="social_footer_ul">
<li><a href="http://facebook.com"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="http://twitter.com"><i class="fab fa-twitter"></i></a></li>
<li><a href="http://telegram.com"><i class="fab fa-telegram"></i></a></li>
<li><a href="http://instagram.com"><i class="fab fa-instagram"></i></a></li>
</ul>
</div>
<div class="page-footer">
<p>
© <span id="date"></span>
<span class="footer-logo"></span>
by me <a href=""></a>
</p>
</div>
</footer> 
