search

Home  >  Q&A  >  body text

Display different content based on screen width

For one element, I have two different texts based on the screen width. I want to display narrow when the screen width is less than or equal to 400px. I want to display large when the screen width is larger than 400px.

Here is the code: https://jsbin.com/qagetoseva/edit?html,css,output

But the problem is that when the width is 400px, this code displays nothing. Does anyone know how to modify it?

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <style>
        .me {
          height: 100vh;
        }
    </style>
</head>
<body>
  <div class="hide-if-large">narrow</div>
  <div class="hide-if-narrow">large</div>
</body>
</html>
@media screen and (min-width: 400px) {
    .hide-if-large {
        display:none
    }    
}

@media screen and (max-width: 400px) {
    .hide-if-narrow {
        display: none;
    }
}

P粉904450959P粉904450959232 days ago402

reply all(1)I'll reply

  • P粉642436282

    P粉6424362822024-04-02 17:29:00

    Dear friend, there is a problem with your CSS media queries.

    @media screen and (max-width: 400px) {
    .hide-if-large {
        display:none
    }

    }

    @media screen and (max-width: 1024px) {
        .hide-if-narrow {
            display: none;
        }
    }

    I changed the second media query to 1024px to fit the tablet size. You should create a new media query for larger screens, for example min-width 1025px

    reply
    0
  • Cancelreply