Search code examples
htmlcssresponsive-design

Text overlapping navbar when resizing window

I am building a website for a landscaping company, when I have the window in standard frame everything looks fine and I have resizing setup for the navbar when resizing the window. The text in the image I have on my website overlaps what I have on my navbar and looks terrible, but I can't seem to figure out how to get anything to work properly. I am relatively new to web development and trying to get more experience under my belt.

text overlapping

@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;
    height:100vh;
}

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


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

.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: #336600;
    padding: 5px 20px;
    display: flex;
    align-items: center;
}

nav a{
    color: #000
}

nav a:hover{
    color:#2d4053
}

.logo {
    flex: 1;
}

.logo a{
    display: flex;
    align-items: center;
    font-size: 20px;
}

.logo a:hover{
    color: #2d4053;
}

.logo img{
    width: 40px;
    margin-right: 10px;
}

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

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

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

.banner-card{
    height:100%;
    background:url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTk4oleUiWLncKk9RUvuBOY-h6AMDZdzVOMiwP-F9Rk1Q&s');
    background-repeat: no-repeat;
    background-size: cover;    

@media screen 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;
    }

    .banner-card{
        margin-top: 15px;
    }

    .banner-text{
        font-size: 50%;
    }

    .banner-text h4{
        font-size: 50%;
        margin: 30px;
    }

}

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

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

.banner-text{
    padding-top: 10px;
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    color: #000;
    transform: translate(-50%, -50%);
}

.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;
}
<!DOCTYPE html>
<html>
<head>
  <title>Home Page for Landscapes</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
</head>
<body>
<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>

<nav>
    <div class="logo">
        <a href="#"><img src="logo.png" alt="logo">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>
<div class="banner-card">
    <img src="background.jpg">
    <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>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

<script>

    $(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>");
            }
        });
    });

</script>
</body>
</html>

I am trying to get the text to resize properly with the window so the viewing experience is the same no matter what device the user is on.

Solution

  • You can consider using background-image CSS property instead of using img tag with position: absolute so that the hero image size will always depends on the size of the text inside, the main changes is here:

    .banner-text {
    width: 100%;
    height: 100%;
    padding: 10% 25%;
    background-size: cover;
    background-position: center;
    text-align: center;
    background-image: url('https://placekitten.com/1920/1080');
}


    <!DOCTYPE html>
<html>
  <head>
    <title>Home Page for Landscapes</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script
      type="module"
      src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"
    ></script>
  </head>
  <body>
    <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>

    <nav>
      <div class="logo">
        <a href="#"><img src="logo.png" alt="logo" />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>

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

    <script>
      $(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>");
          }
        });
      });
    </script>

    <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>
      </div>
    </div>
  </body>
</html>

<style>
  @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;
  }

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

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

  .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: #336600;
    padding: 5px 20px;
    display: flex;
    align-items: center;
  }

  nav a {
    color: #000;
  }

  nav a:hover {
    color: #2d4053;
  }

  .logo {
    flex: 1;
  }

  .logo a {
    display: flex;
    align-items: center;
    font-size: 20px;
  }

  .logo a:hover {
    color: #2d4053;
  }

  .logo img {
    width: 40px;
    margin-right: 10px;
  }

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

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

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

  @media screen 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;
    }

    .banner-card {
      margin-top: 15px;
    }

    .banner-text {
      font-size: 50%;
    }

    .banner-text h4 {
      font-size: 50%;
      margin: 30px;
    }
  }

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

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

  .banner-text {
    width: 100%;
    height: 100%;
    padding: 10% 25%;
    background-size: cover;
    background-position: center;
    text-align: center;
    background-image: url('https://placekitten.com/1920/1080');
  }

  .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;
  }
</style>