SCSS How do I remove additional Height from div? - html

Question

I've created a card that is showcasing an article.
For some reason, two of the elements have additonal height that's causing weird behaviour. At first I thought it was the image but giving it a diplay:block hasn't solved the issue.
I've been messing around with it a lot so it's a bit of a mess at this point. SO here's the weird extra height between the white part of the card and the image:
Because it's happening to two elements, I have a feeling that it's something important that I am fundamentally missing.
The two affected elements are:
articleCard_image, a <div>
articleCard_container, a <section>
The issue only occurs for the <secction> when the 'Read Article' anchor is displayed. (I've commmented out the display:none which is changed to block on hover)
I'm using Gulp to compile the scss to css.
Any help would be greatly appreciated. Thank you! Code shown below:
SCSS:
.articleCard_container {
width: 55.7rem;
height: auto;
.articleCard_image {
width: 100%;
height: auto;
box-sizing: border-box;
display: block;
.articleCard_category {
position: relative;
bottom: 4rem;
left: 3rem;
display: flex;
align-items: center;
text-transform: uppercase;
font-size: 1.4rem;
color: var(--white);
width: 100%;
p {
font-weight: 600;
}
.thumbtack {
margin-right: 1rem;
margin-bottom: 1rem;
}
.purpleRose {
width: 100%;
display: block;
}
}
}
.articleCard_textContent {
box-sizing: border-box;
padding: 1rem 3rem 5rem 3rem;
width: 100%;
margin: 0;
background-color: var(--white);
.articleCard_date {
color: var(--articleDate);
text-transform: uppercase;
font-size: 1.2rem;
}
.articleCard_title {
margin-top: 1rem;
font-size: 1.6rem;
width: 100%;
color: var(--articleTitle);
font-weight: 700;
}
}
.articleCard_readMore {
text-transform: uppercase;
color: var(--buttonPrimary);
font-size: 1.2rem;
font-weight: 600;
position: relative;
bottom: 2rem;
left: 3rem;
// display: none;
}
}
.articleCard_container:hover {
.articleCard_readMore {
display: block;
box-sizing: border-box;
text-decoration: none;
}
}
HTML:
<div class="carouselle_container">
<section class="articleCard_container">
<div class="articleCard_image">
<img class="purpleRose" src="./assets/purpleRose.jpg" alt="purple rose">
<div class="articleCard_category">
<img class="thumbtack" src="./assets/thumtack.svg" alt="thumbtack icon">
<p>featured news / category</p>
</div>
</div>
<div class="articleCard_textContent">
<time date="2020-03" class="articleCard_date"> march 20th 20xx</time>
<h3 class="articleCard_title">This is an example of a really long heading that needs to span over multiple lines.</h3>
</div>
<a class="articleCard_readMore" href="/">read article</a>
</section>
</div>

Answer 1

you have to give the .articleCard_image position relative to make sure that the category does not overflow and then give the .articleCard_category absolute position and give a full width and height and display block to the img in order to take the entire space
.articleCard_container {
width: 55.7rem;
height: auto;
.articleCard_image {
width: 100%;
height: auto;
position: relative;
img{
display: block;
height: 100%;
width: 100%;
}
.articleCard_category {
position: absolute;
bottom: 4rem;
left: 3rem;
display: flex;
align-items: center;
text-transform: uppercase;
font-size: 1.4rem;
color: var(--white);
width: 100%;
p {
font-weight: 600;
}
.thumbtack {
margin-right: 1rem;
margin-bottom: 1rem;
}
.purpleRose {
width: 100%;
display: block;
}
}
}
.articleCard_textContent {
box-sizing: border-box;
padding: 1rem 3rem 5rem 3rem;
width: 100%;
margin: 0;
background-color: var(--white);
.articleCard_date {
color: var(--articleDate);
text-transform: uppercase;
font-size: 1.2rem;
}
.articleCard_title {
margin-top: 1rem;
font-size: 1.6rem;
width: 100%;
color: var(--articleTitle);
font-weight: 700;
}
}
.articleCard_readMore {
text-transform: uppercase;
color: var(--buttonPrimary);
font-size: 1.2rem;
font-weight: 600;
position: relative;
bottom: 2rem;
left: 3rem;
// display: none;
}
}
.articleCard_container:hover {
.articleCard_readMore {
display: block;
box-sizing: border-box;
text-decoration: none;
}
}