Search code examples
htmlcssmacossafari

The text is cut on Safari browser

I have problem with some text on safari browser. I don't know why text is cut on safari browser, although is everything good on other browser on windows. I don't use mac, so i don't know what is different on safari?

This is how is look like.

SCSS Code:

.serv-list {
  background-color: #6947d2;
  display: flex;
  padding: 50px 6vw;
  flex-direction: column;

  .serv-box {
    display: flex;
    align-items: center;
    max-width: 992px;
    margin: 0px;
    height: max-content;

  }

  h2 {
    font-family: "CocoGhoticBold";
    color: $RED_COLOR;
    font-size: 55px;
  }

  p {
    font-family: "Gotham";
    color: $WHITE_COLOR;
    font-size: 25px;

  }

  .right-box {
    text-align: right;
    align-self: flex-end;
  }
}

HTML Code:

 <div class="serv-box right-box">
        <div>
          <h2>Script Writting</h2>
          <p>
            Bumping our heads together to make the perfect script for your ads /
            corporate videos and documentaries.
          </p>
        </div>
        <img src="assests/icons/Script.png" alt="" />
      </div>
Solution

  • If I'm not the wrong problem was in the font. Some kind of bug so it isn't shown properly on the safari browser. When I changed it, everything seems to be everything good.