How do I leave an active <div> only for one screen size? For example: only in 750px does it become active (I’m a beginner)

Asked

Viewed 22 times

-1

<div id="750px">
    <a href="https://www.instagram.com/p/CKBoR2ZDlwL/" target="_blank" rel="external"><img src="img/camisas/camisa0001.png" alt="Camisa 1" id="camisa1" class="camisas_p1"></a>


    <a href="https://www.instagram.com/p/CKGxsU0gHl_/" target="_blank" rel="external"><img src="img/camisas/camisa0002.png" alt="Camisa 2" id="camisa2" class="camisas_p1"></a>
</div>
html css div responsive screen

  • can be done with "media query"

1 answer

0

You can use jquery and do it as follows

  <div id="pixel" hidden="true">
    <a href="https://www.instagram.com/p/CKBoR2ZDlwL/" target="_blank" rel="external"><img src="img/camisas/camisa0001.png" alt="Camisa 1" id="camisa1" class="camisas_p1"></a>


    <a href="https://www.instagram.com/p/CKGxsU0gHl_/" target="_blank" rel="external"><img src="img/camisas/camisa0002.png" alt="Camisa 2" id="camisa2" class="camisas_p1"></a>
  </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>      
<script type="text/javascript">
  //Detecta resize da tela 
  $( window ).resize(function() {
    var div = document.getElementById('pixel');
    var w = $(window).width();
    console.log(w);
    if(w == 750){
        div.hidden = false;
    }else{
        div.hidden = true;
    }

  });
</script>

Or if you prefer you can use css

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
  visibility: visible;
}
@media only screen and (min-width: 750px) {
  div {
    visibility: hidden;
  }
}

</style>
</head>
<body>
<div>
    <a href="https://www.instagram.com/p/CKBoR2ZDlwL/" target="_blank" rel="external"><img src="img/camisas/camisa0001.png" alt="Camisa 1" id="camisa1" class="camisas_p1"></a>
    <a href="https://www.instagram.com/p/CKGxsU0gHl_/" target="_blank" rel="external"><img src="img/camisas/camisa0002.png" alt="Camisa 2" id="camisa2" class="camisas_p1"></a>
</div>
</body>
</html>

  • 1

    Thanks friend, you are a friend :D)

Browser other questions tagged html css div responsive screen

You are not signed in. Login or sign up in order to post.