mystyle.css

#container {
    overflow-x:hidden;
    width:100%;
  }
  #container-profile {
    overflow-x:hidden;
    width:100%;
  }
[id*="toresize"] {
    width: 300px;
    padding-top:200px ;
  }
  [id*="moresm"] {
    width: 100%;
  }
  [id*="container-profile"] {
    width: 100%;
  }
  [id*="items-table"] {
    visibility: hidden;
    max-height: 0;
    max-width: 0;
    }
  [id*="containermob"]{
      background-color: #ffffff; 
      max-width: 100%;
  }
  [id*="dont-fade"]{
    background-color: #ffffff; 
    max-width: 100%;
}
  @media only screen and (min-width: 720px) {
    /* For tablets: */
    #toresize {
        width: 75%;
        padding-top:150px ;
    }
    #moresm {
      width: 40%;
   }
   #container-profile{
    width: 100%;
  }
  #items-table{
    visibility: visible;
    max-height: 100%;
    max-width: 100%;
  }
  }
  @media only screen and (min-width: 1030px) {
    /* For desktop: */
   #toresize {
       width: 450px;
       padding-top:100px ;
    }
    #moresm {
      width: 50%;
   }
   #container-profile{
     width: 50%;
   }
   #items-table{
    visibility: visible;
    max-height: 100%;
    max-width: 100%;
  }
  #navbar {
    background-color: #333;
    position: fixed;
    top: 0;
    width: 100%;
    display: block;
    transition: top 0.3s;
  }
  #containermob{
    background-color: #ffffff; 
    max-width: 65%;
  }
  #dont-fade{
    background-color: #ffffff; 
    max-width: 65%;
  }

  }
  #zoom {
    padding: 20px;
    transition: transform .2s; /* Animation */
    width:100%;
     margin: 0 auto;
  }
  
  #zoom:hover {
    transform: 
    scale(1.05); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  }