I’m having a problem with this banner. Currently, I’m working in Magento 2 and I have to set this banner up. Everything is okay until the moment I put some font inside.
Here is my code, but first see the images below.
#box3 h3 {
font-size: calc(22px + (30 - 22) * ((100vw - 300px) / (1600 - 300)));
font-family: 'Playfair Display', serif;
font-weight: 700;
text-transform: none;
font-style: italic;
display: inline-block;
margin-right: 15px;
margin-left: 15px;
bottom: 43px;
color: white;
}
#font3{
font-size: calc(9px + (12 - 9) * ((100vw - 300px) / (1600 - 300)));
display: inline-block;
text-transform: none;
bottom: 43px;
color: white;
}
@media only screen and (max-width: 370px) {
/* For mobile phones: */
.breakpointbr {
display: block;
}
}
<br class="breakpointbr">
<div class="item">
<div id="box3">
<img src="https://via.placeholder.com/605x350.png/09f/fff" alt="chicken" width="605" height="350" />
<h3>Here We Are</h3><a id="font3" href="#">See Products</a>
</div>
</div>
This is what happens with the h3 element and some text.
See Image
Without the h3 element (and the way that I want it but with font insides)
See image
2
Answers
Normally H tags have a margin.
Inspect the h3 on dev tools and probably that will be adding that extra space on the bottom.
I think
#box3 h3
should have amargin-bottom: 0;
and your problem might me solvedI Hope Below example helps.