Html – How to fix overflowing text on mobile devices

$(function() {
  $(".toggle").on("click", function() {
    if ($(".menu").hasClass("active")) {
      $(".menu").removeClass("active");
      $(this).find("a").html("<ion-icon name='menu-outline'></ion-icon>");
    } else {
      $(".menu").addClass("active");
      $(this).find("a").html("<ion-icon name='close-outline'></ion-icon>");
    }
  });
});

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif;
  width: 100%;
}

a,
a:hover {
  text-decoration: none;
}

.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 25px;
  background: #0B3442;
}

.top-bar span {
  color: #fff;
}

.top-bar ul {
  list-style: none;
  display: flex;
}

.top-bar li {
  margin: 0px 5px;
}

.top-bar a {
  color: #fff;
}

.top-bar a:hover {
  color: rgb(0, 174, 255);
}

nav {
  background: #537F3A;
  padding: 5px 20px;
  display: flex;
  align-items: center;
}

nav a {
  color: #000
}

nav a:hover {
  color: #0B3442
}

.logo {
  flex: 1;
  align-items: left;
}

.logo a {
  display: flex;
  align-items: center;
  vertical-align: center;
  font-size: 22px;
  font-weight: bold;
  resize: vertical;
  overflow-wrap: normal;
}

.logo a:hover {
  color: #0B3442;
}

.logo img {
  width: 200px;
  padding: 0px 10px;
}

.menu {
  display: flex;
  align-items: center;
  list-style: none;
}

.menu li {
  padding: 15px 10px;
  font-size: 20px;
}

.toggle {
  font-size: 30px;
  display: none;
}

@media only screen and (min-device-width: 320px) and (max-width: 680px) {
  nav {
    display: block;
    position: relative;
    padding: 15px 20px;
  }
  .menu {
    margin-top: 15px;
    display: none;
  }
  .menu.active,
  .toggle {
    display: block;
  }
  .toggle {
    position: absolute;
    top: 15px;
    right: 20px;
  }
  .services {
    display: flex;
    flex-direction: column;
  }
  .card {
    width: 85%;
    display: flex;
    margin: 20px 0px;
  }
}

.banner-card {
  margin: 0 auto;
  position: relative;
}

.banner-card img {
  max-width: 100%;
  height: auto;
}

.banner-text h4 {
  font-size: xxx-large;
  text-transform: uppercase;
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 5px;
  color: #fff;
}

.banner-text p {
  font-size: large;
  font-weight: bold;
  margin-bottom: 5px;
  color: #fff;
}

.banner-text {
  width: 100%;
  height: 100%;
  padding: 10% 25%;
  background-size: cover;
  background-position: center;
  text-align: center;
  background-image: url('background.jpg')
}

.banner-text button {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  background: #0B3442;
  margin: 15px;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow, transform;
  transition-property: box-shadow, transform;
}

.banner-text button:hover,
.banner-text button:focus,
.banner-text button:active {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.title h1 {
  text-align: center;
  padding-top: 50px;
  font-size: 42px;
}

.title h1::after {
  content: "";
  height: 4px;
  width: 230px;
  background-color: #000;
  display: block;
  margin: auto;
}

.services {
  width: 85%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 75px auto;
  text-align: center;
}

.card {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  margin: 20px 20px;
  padding: 20px 20px;
  background-color: #0B3442;
  color: #fff;
  border-radius: 10px;
  cursor: pointer;
}

.card .icon {
  font-size: 35px;
  margin-bottom: 10px;
}

.card h2 {
  font-size: 28px;
  color: #537F3A;
  margin-bottom: 20px;
}

.card p {
  font-size: 17px;
  margin-bottom: 30px;
  line-height: 1.5;
  color: #fff;
}

.card:hover {
  background-color: #7a99b8;
  transition: 0.4s ease;
}

.button {
  font-size: 15px;
  text-decoration: none;
  color: #000;
  background-color: #fff;
  padding: 8px 12px;
  border-radius: 5px;
  letter-spacing: 1px;
}

.button:hover {
  background-color: #537F3A;
  transition: 0.4s ease;
}

/* new */

body{
  min-width: 320px;
}

@media (max-width: 680px) {
  .logo {
    margin-right: 40px;
  }
}

@media (max-width: 479px) {
  .logo a {
    font-size:16px;
  }
}

<!DOCTYPE html>
<html>

<head>
  <title>Mountain Man Landscapes Website</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
</head>

<body>

  <!-- This is the topbar that hosts all the social links and phone number -->

  <div class="top-bar">
    <span><a href="tel:555555555"><ion-icon name="call-outline"></ion-icon> (555) 555-5555</a></span>
    <ul>
      <li>
        <a href="#">
          <ion-icon name="logo-facebook"></ion-icon>
        </a>
      </li>
      <li>
        <a href="#">
          <ion-icon name="logo-twitter"></ion-icon>
        </a>
      </li>
      <li>
        <a href="#">
          <ion-icon name="logo-instagram"></ion-icon>
        </a>
      </li>
    </ul>
  </div>

  <!-- Navigation bar -->

  <nav>
    <div class="logo">
      <a href="#"><img src="logo.png" alt="logo">Mountain Man Landscapes</a>
    </div>
    <div class="toggle">
      <a href="#">
        <ion-icon name="menu-outline"></ion-icon>
      </a>
    </div>
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">Solutions</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Gallery</a></li>
    </ul>
  </nav>

  <!-- This is the navbar resizing hamburger script -->

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

  <!-- Banner card that has the welcome image and text aswell as the gallery button -->

  <div class="banner-card">
    <div class="banner-text">
      <h4>We don't beat around the bush.</h4>
      <p>Landscapes has all the professional skills required to make your ideas come to life. With over 10 plus years of experience there is nothing our experts can't handle.</p>
      <button onclick="#">View Gallery</button>
    </div>
  </div>

  <!-- Services section hosts the services cards -->

  <div class="section">
    <div class="title">
      <h1>Our Services</h1>
    </div>
    <div class="services">
      <div class="card">
        <div class="icon">
          <i class="fa-solid fa-pen-ruler"></i>
        </div>
        <h2>Design</h2>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum dolore recusandae i</p>
        <a href="" class="button">Learn More</a>
      </div>

      <div class="card">
        <div class="icon">
          <i class="fa-solid fa-screwdriver-wrench"></i>
        </div>
        <h2>Build</h2>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum dolore recusandae i</p>
        <a href="" class="button">Learn More</a>
      </div>

      <div class="card">
        <div class="icon">
          <i class="fa-solid fa-scissors"></i>
        </div>
        <h2>Maintain</h2>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum dolore recusandae i</p>
        <a href="" class="button">Learn More</a>
      </div>
    </div>
  </div>

</body>

</html>