Magento Question posted in
The official documentation can be found here.

I'm having problem with my banner title in magento 2

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

Tags:

2

Answers


  1. 0

    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. 0

    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