Ocultar y mostrar

condicionado al tamano de panatalla

by Emmanuel Garcia

HTML

<a href="#" onclick = "toggle()"><span class="resort_description"><strong>Resort amenities<br></strong></span></a>
<div id="portfolio" class = "hidden">

<table width="97%" border="0" cellspacing="0" cellpadding="0"  style="padding-top:5px;" class="resort_description">
  <tr>
    <td width="25%" align="left"><img src="images/icons/church.svg" width="40" height="35" ><br> Church</td>
    <td width="25%"><img src="images/icons/handcrafts.svg" width="40" height="35"  ><br> Handcrafts</td>
    <td width="25%"><img src="images/icons/shopping.svg" width="40" height="35"  ><br> Shopping</td>
    <td width="25%"><img src="images/icons/archaeological.svg" width="40" height="35" ><br> Archaeological Sites</td>
  </tr> 
</table>  
</div>







<script type = "text/javascript">
function toggle(){
var divn1 = document.getElementById("portfolio");  
if (divn1.style.display == "none")  {
divn1.style.display = "block";}
    else {
divn1.style.display = "none";
}}
</script>

CSS

#portfolio {
    display:none; height:auto; width:100%;
}

/* if screen size gets wider than 1024 */

@media screen and (min-height:3900px){
    #portfolio {
        display:block; height:auto; width:100%;
    }
}