@media (max-width: 500px){
    .about-content {
        grid-template-columns: 1fr;
    }


    .cardcontent {
        grid-template-columns: 1fr;
    }

    .footer-links {
        float: left;
    }
    
    .brand-title {
        display: initial;
    }

    .toggle-button {
        display: flex;
    }

    .navbar-links { 
        width: 100%;
    }

    .navbar {
        flex-direction: column;
        align-items: flex-start;
        display: flex;
    }

    .navbar-links ul {
        width: 100%;
        flex-direction: column;
    }

    .navbar-links li {
        text-align: center;
    }

    .navbar-link li a {
        padding: 0.5rem 1rem;
    }

    .navbar-links.active{
        display: flex;
    }

    .banner-text{
        display: none;
    }
}

<header> 
        <nav class="navbar"> <!-- Element for Website Navigation-->
          <div class="brand-title">RAZA</div>
          <a href="#" class="toggle-button">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
          </a>
          <div class="navbar-links">
            <ul>
              <li><a href="about me.html">About Me</a></li>
              <li><a href="index.html">Portfolio</a></li>
              <li><a href="src/Resume.pdf" target="_blank">Resume</a></li>
            </ul>
          </div>
        </nav>

        <div class="banner">
          <img src="src/Banner Image.svg" class="banner-img rellax" data-rellax-speed="10">
          <div class="banner-text rellax" data-rellax-speed="2">
            <h1>RAZA</h1>
            <h2 style="
            font-size: 1.85rem;">Shabih-ul-Hassan</h2>
            <h4 style="
            font-weight: bold">Graphic Designer & Video Editor</h4>
          </div>
        </div>
      </header>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

So I'm building a portfolio website on html & css. I want the banner to disappear after the screen width is reduced to a certain size.

Problem is when I remove the banner with display: none, it takes the full parent with it which includes the nav bar.

It works fine when I use visibility: hidden but it leaves this vapid empty space.

CodePudding user response：

I managed to answer the question. Just had to turn a position: relative to an absolute. How that works? No idea. But hey, still learning

CodePudding user response：

@media screen and (max-width: 768px){
    .banner{
        display: none;
    }
}

Dear! Somehow the CSS isn't correctly coded. Remove everything from the styles that you have and add the above media query. For instance, this query will work for the mobile devices and banner will remove when switched to the mobile screens. I hope it will work for you :)