skip to Main Content

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


  1. 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 a margin-bottom: 0; and your problem might me solved

    Login or Signup to reply.
  2. I Hope Below example helps.

    #box3 {
      position: relative;
    }
    #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;
      color: white;
      margin-bottom: 0;
      display:inline-block;
    }
    
    #box3 .inner-text {
      position: absolute;
      bottom: 20px;
      left: 0;
      margin-right: 15px;
      margin-left: 15px;
      display:inline-block;
    }
    
    #font3 {
      font-size: calc(9px + (12 - 9) * ((100vw - 300px) / (1600 - 300)));
      text-transform: none;
      color: white;
      margin-left:10px;
    }
    
    @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" />
        <div class="inner-text">
          <h3>Here We Are</h3>
          <a id="font3" href="#">See Products</a>
        </div>
      </div>
      <div id="box3">
        <img src="https://via.placeholder.com/605x350.png/09f/000" alt="chicken" width="605" height="350" />
        <div class="inner-text">
          <h3>Here We Are</h3>
          <a id="font3" href="#">See Products</a>
        </div>
      </div>
      <div id="box3">
        <img src="https://via.placeholder.com/605x350.png/09f/951" alt="chicken" width="605" height="350" />
        <div class="inner-text">
          <h3>Here We Are</h3>
          <a id="font3" href="#">See Products</a>
        </div>
      </div>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search