title: allowing display table but not showing all content on load
body: <p>I have a Flickity slider that uses display:table;
   so when the browser is shrunk it still displays all the content in the veiwport div. My problem is when the page loads it displays all the cells in the veiwport div until the page fully loads. I can remove table and use overflow:hidden; to fix it but then when the browser is shrunk the content is clipped. how can I use both? and make it to were when the page loads the other cells are hidden and it still expands the div when the browser is shrunk?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*     ADDITIONAL SERVICES     */
  
  #additional_services{border: px solid purple;
  width:100%;
  overflow:hidden;
  display:table;
  background-color:#FFF;
  
  }
  /*! Flickity v1.2.1
  http://flickity.metafizzy.co
  ---------------------------------------------- */
  
  
  
  .flickity-enabled {
  position: relative;
  }
  .flickity-enabled:focus { 
  outline: none; 
  }
  .flickity-viewport {
    overflow: hidden;
    position: relative;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    background-color:#FFF;
   
  }
  .flickity-slider {
    position: absolute;
    width: 100%;
    height: 100%; 
    padding: 0;
    margin: 0; 
    display:table;
  }
  .carousel-cell {
  border: px solid red;
  padding-top:5px;
    display:table;
    width: 100%;
    height: 240px;
    padding: 0;
    margin: 0;
    display:table;
  margin-top:10px;
  margin-bottom:10px;
  }
  /* cell number */
  .carousel-cell:before {
    display: block;
    text-align: center;
    padding: 0;
    margin: 0;
    line-height: 200px;
    font-size: 80px;
    color: white;
  }
  
  
  
  
  
  /* draggable */
  
  .flickity-enabled.is-draggable {
    -webkit-tap-highlight-color: transparent;
            tap-highlight-color: transparent;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  }
  
  .flickity-enabled.is-draggable .flickity-viewport {
    cursor: move;
    cursor: -webkit-grab;
    cursor: grab;
  }
  
  .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
    cursor: -webkit-grabbing;
    cursor: grabbing;
  }
  
  /* ---- previous/next buttons ---- */
  
  .flickity-prev-next-button {
    position: absolute;
    top: 50%;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: white;
    background: hsla(0, 0%, 100%, 0.75);
    cursor: pointer;
    /* vertically center */
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  
  .flickity-prev-next-button:hover { background: white; }
  
  .flickity-prev-next-button:focus {
  
    outline: none;
    box-shadow: 0 0 0 5px #09F;
  }
  
  .flickity-prev-next-button:active {
    filter: alpha(opacity=60); /* IE8 */
    opacity: 0.6;
  }
  
  .flickity-prev-next-button.previous { left: 10px; }
  .flickity-prev-next-button.next { right: 10px; }
  /* right to left */
  .flickity-rtl .flickity-prev-next-button.previous {
    left: auto;
    right: 10px;
  }
  .flickity-rtl .flickity-prev-next-button.next {
    right: auto;
    left: 10px;
  }
  
  .flickity-prev-next-button:disabled {
    filter: alpha(opacity=30); /* IE8 */
    opacity: 0.3;
    cursor: auto;
  }
  
  .flickity-prev-next-button svg {
    position: absolute;
    left: 20%;
    top: 20%;
    width: 60%;
    height: 60%;
  }
  
  .flickity-prev-next-button .arrow {
    fill: #333;
  }
  
  /* color &amp; size if no SVG - IE8 and Android 2.3 */
  .flickity-prev-next-button.no-svg {
    color: #333;
    font-size: 26px;
  }
  
  /* ---- page dots ---- */
  
  .flickity-page-dots {
    1position: absolute;
    display:none;
    width: 100%;
    bottom: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
    line-height: 1;
  }
  
  .flickity-rtl .flickity-page-dots { direction: rtl; }
  
  .flickity-page-dots .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 8px;
    background: #333;
    border-radius: 50%;
    filter: alpha(opacity=25); /* IE8 */
    opacity: 0.25;
    cursor: pointer;
  }
  
  .flickity-page-dots .dot.is-selected {
    filter: alpha(opacity=100); /* IE8 */
    opacity: 1;
  }
  
  
  .cell_left{ 
  float:left;
  width:35%;
  height:90%;
  padding-top:5px;
  padding-bottom:5px;
  margin-left:5%;
  display:table; 
  position: relative;
  
  
  }
  .cell_right{  
  float:right;
  width:35%; 
  height:80%;
  margin-right:5%;
  display:table;  
  position: relative;
  padding-top:5px;
  padding-bottom:5px;
  
  
  }
  .cell_head{
  width:100%;
  font-weight:bold;
  text-transform:uppercase;
  padding-bottom:5%;
  display:table;
  }
  .cell_review{
  width:100%;
  display:table;
  }
  .cell_sig{
  width:97%;
  padding-left:3%;
  padding-top:5%;
  font-weight:bold;
  text-transform:uppercase;
  display:table;
  }
  
  
  
  /* gallery pics */
  #ourwork_gallery{
  background-color:#f0f0f0;
  width:100%;
  height:350px;
  display:table;
  padding-bottom:10px;
  }
  
  .gallery_header{
   width:100%;
   font-size:20px;
   font-weight:bold;
   border:px solid green;
   text-align:center;
   margin: 5% 0 5% 0;
  
   }
   
   
   
  .gallery_pics_holder{border:px solid green;
  width:100%;text-align:center;height:350px;
  display:table;
  }
  .gallery_pics{
  display:inline-block;
  width:300px;
  height:300px;
  margin:10px;
  text-align:center;
  
  }
  .gallery_pics img{
  width: 100%; 
  height: 100%;
  }
  .gallery_pics:hover{
  cursor:pointer;
  }
  
  
  .gallery_pics.fullscreen{
  z-index: 9999;
  position: fixed;
  margin: 0 auto;
  width: 95%;
  height: 95%; 
  top: 2%; 
  left: 3%;
  background-color:#000;
  }
  .gallery_pics.fullscreen img{
  
   max-width: 90%;
    max-height: 90%;
    width: auto;
    height: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" class="no-js"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;link rel="SHORTCUT ICON" href="images/favicon.ico"/&gt;
  &lt;title&gt;yyy&lt;/title&gt;
  &lt;meta property="og:description"   content="Your description" /&gt;
  &lt;link rel="stylesheet" href="css/ourwork.css" type="text/css" /&gt;
  &lt;link rel="stylesheet" href="css/style.css" type="text/css" /&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
  
  &lt;script src="scripts/modernizr-2.6.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"&gt;&lt;/script&gt;
  
  
  &lt;script&gt;
  $(document).ready(function(){
  $("#navmenu").click(function(){
  $("#menu").toggle();
  });
  });
  &lt;/script&gt;
  &lt;script&gt;
  $(window).load(function() {
    $("body").removeClass("preload");
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body class="preload"&gt;
  
  
  
  
  
  &lt;div id="additional_services"&gt;
  
  
  &lt;div class="carousel js-flickity" data-flickity-options='{ "autoPlay": true,"wrapAround": true }'&gt;
  &lt;!----------------------------------------------------------------carouselcell----------------------------------------------------------------&gt; 
  
  &lt;div class="carousel-cell"&gt;  &lt;div class="cell_left"&gt;
   &lt;div class="cell_head"&gt;&lt;/div&gt;&lt;!--cell_head--&gt;
       &lt;div class="cell_review"&gt;ohn writes: i am good in english, i try my best in doing what i do what i think is best and that im pretty intelligent when it comes to doing this. to be honest its not that hard but i find it easier for me to just write it like this, and i hope it can be easy for people to read this too. i like writing about stuff. i like chicken. i like food. i like eating. eating is great. blah blah blah blah blah. i am awesome. i am cool. i believe im awesome and cool. isnt that awesome and cool?????
  &lt;/div&gt;&lt;!--cell_review--&gt;
       &lt;div class="cell_sig"&gt;Michael W.&lt;/div&gt;&lt;!--cell_sig--&gt;
    &lt;/div&gt;&lt;!--cell_left--&gt;
    
    
    
    &lt;div class="cell_right"&gt;
   &lt;div class="cell_head"&gt;&lt;/div&gt;&lt;!--cell_head--&gt;
       &lt;div class="cell_review"&gt;ohn writes: i am good in english, i try my best in doing what i do what i think is best and that im pretty intelligent when it comes to doing this. to be honest its not that hard but i find it easier for me to just write it like this, and i hope it can be easy for people to read this too. i like writing about stuff. i like chicken. i like food. i like eating. eating is great. blah blah blah blah blah. i am awesome. i am cool. i believe im awesome and cool. isnt that awesome and cool?????
   &lt;/div&gt;&lt;!--cell_review--&gt;
       &lt;div class="cell_sig"&gt;Wesley Adkins&lt;/div&gt;&lt;!--cell_sig--&gt;
    &lt;/div&gt;&lt;!--cell_right--&gt;&lt;/div&gt;
  
  &lt;!----------------------------------------------------------------carouselcell----------------------------------------------------------------&gt; 
  
  &lt;div class="carousel-cell"&gt;  &lt;div class="cell_left"&gt;
   &lt;div class="cell_head"&gt;&lt;/div&gt;&lt;!--cell_head--&gt;
       &lt;div class="cell_review"&gt;ohn writes: i am good in english, i try my best in doing what i do what i think is best and that im pretty intelligent when it comes to doing this. to be honest its not that hard but i find it easier for me to just write it like this, and i hope it can be easy for people to read this too. i like writing about stuff. i like chicken. i like food. i like eating. eating is great. blah blah blah blah blah. i am awesome. i am cool. i believe im awesome and cool. isnt that awesome and cool?????
  &lt;/div&gt;&lt;!--cell_review--&gt;
       &lt;div class="cell_sig"&gt;Theo Dotson&lt;/div&gt;&lt;!--cell_sig--&gt;
    &lt;/div&gt;&lt;!--cell_left--&gt;
    
    
    
    &lt;div class="cell_right"&gt;
  &lt;div class="cell_head"&gt;&lt;/div&gt;&lt;!--cell_head--&gt;
       &lt;div class="cell_review"&gt;ohn writes: i am good in english, i try my best in doing what i do what i think is best and that im pretty intelligent when it comes to doing this. to be honest its not that hard but i find it easier for me to just write it like this, and i hope it can be easy for people to read this too. i like writing about stuff. i like chicken. i like food. i like eating. eating is great. blah blah blah blah blah. i am awesome. i am cool. i believe im awesome and cool. isnt that awesome and cool?????
  &lt;/div&gt;&lt;!--cell_sig--&gt;
   &lt;div class="cell_sig"&gt;Theo Dotson&lt;/div&gt;&lt;!--cell_sig--&gt;
    &lt;/div&gt;&lt;!--cell_right--&gt;&lt;/div&gt;
  
  &lt;!----------------------------------------------------------------carouselcell----------------------------------------------------------------&gt; 
  
  
  &lt;div class="carousel-cell"&gt;  &lt;div class="cell_left"&gt;
   &lt;div class="cell_head"&gt;&lt;/div&gt;&lt;!--cell_head--&gt;
       &lt;div class="cell_review"&gt;ohn writes: i am good in english, i try my best in doing what i do what i think is best and that im pretty intelligent when it comes to doing this. to be honest its not that hard but i find it easier for me to just write it like this, and i hope it can be easy for people to read this too. i like writing about stuff. i like chicken. i like food. i like eating. eating is great. blah blah blah blah blah. i am awesome. i am cool. i believe im awesome and cool. isnt that awesome and cool?????
  &lt;/div&gt;&lt;!--cell_review--&gt;
       &lt;div class="cell_sig"&gt;Kev Giff&lt;/div&gt;&lt;!--cell_sig--&gt;
    &lt;/div&gt;&lt;!--cell_left--&gt;
    
    
    
    &lt;div class="cell_right"&gt;
   &lt;div class="cell_head"&gt;&lt;/div&gt;&lt;!--cell_head--&gt;
       &lt;div class="cell_review"&gt;ohn writes: i am good in english, i try my best in doing what i do what i think is best and that im pretty intelligent when it comes to doing this. to be honest its not that hard but i find it easier for me to just write it like this, and i hope it can be easy for people to read this too. i like writing about stuff. i like chicken. i like food. i like eating. eating is great. blah blah blah blah blah. i am awesome. i am cool. i believe im awesome and cool. isnt that awesome and cool?????
   &lt;/div&gt;&lt;!--cell_review--&gt;
       &lt;div class="cell_sig"&gt;Kathleen Griffith&lt;/div&gt;&lt;!--cell_sig--&gt;
    &lt;/div&gt;&lt;!--cell_right--&gt;&lt;/div&gt;
  
  
  
  
  &lt;/div&gt;
  
  &lt;/div&gt;&lt;!--additional_services--&gt;
  
   
  
   &lt;!----------------------------------------------------------------SEC2----------------------------------------------------------------&gt; 
  &lt;div id="ourwork_gallery"&gt;
  
  
   &lt;div class="gallery_header"&gt;Our work speaks for itself!&lt;/div&gt;&lt;!--gallery_header--&gt;
   
    &lt;div class="gallery_pics_holder"&gt;
    
     &lt;div class="gallery_pics"&gt;&lt;img src="images/before1.jpg" width="300px" height="300px" alt="image coming soon"&gt;&lt;/div&gt;
  &lt;!--gallery_header--&gt;
     &lt;div class="gallery_pics"&gt;&lt;img src="images/after1.jpg" width="300px" height="300px" alt="image coming soon"&gt;&lt;/div&gt;&lt;!--gallery_header--&gt;
     &lt;div class="gallery_pics"&gt;&lt;img src="images/before2.jpg" width="300px" height="300px" alt="image coming soon"&gt;&lt;/div&gt;&lt;!--gallery_header--&gt;
     &lt;div class="gallery_pics"&gt;&lt;img src="images/after2.jpg" width="300px" height="300px" alt="image coming soon"&gt;&lt;/div&gt;&lt;!--gallery_header--&gt;
     &lt;div class="gallery_pics"&gt;&lt;img src="images/before3.jpg" width="300px" height="300px" alt="Ohio Discount Auto Glass"&gt;&lt;/div&gt;&lt;!--gallery_header--&gt;
     &lt;div class="gallery_pics"&gt;&lt;img src="images/after3.jpg" width="300px" height="300px" alt="image coming soon"&gt;&lt;/div&gt;&lt;!--gallery_header--&gt;
     &lt;div class="gallery_pics"&gt;&lt;img src="images/before4.jpg" width="300px" height="300px" alt="image coming soon"&gt;&lt;/div&gt;&lt;!--gallery_header--&gt;
     &lt;div class="gallery_pics"&gt;&lt;img src="images/after4.jpg" width="300px" height="300px" alt="image coming soon"&gt;&lt;/div&gt;&lt;!--gallery_header--&gt;
     &lt;div class="gallery_pics"&gt;&lt;img src="images/before5.jpg" width="300px" height="300px" alt="image coming soon"&gt;&lt;/div&gt;&lt;!--gallery_header--&gt;
     &lt;div class="gallery_pics"&gt;&lt;img src="images/after5.jpg" width="300px" height="300px" alt="image coming soon"&gt;&lt;/div&gt;&lt;!--gallery_header--&gt;
     &lt;div class="gallery_pics"&gt;&lt;img src="images/before6.jpg" width="300px" height="300px" alt="image coming soon"&gt;&lt;/div&gt;&lt;!--gallery_header--&gt;
     &lt;div class="gallery_pics"&gt;&lt;img src="images/after6.jpg" width="300px" height="300px" alt="image coming soon"&gt;&lt;/div&gt;&lt;!--gallery_header--&gt;
     &lt;div class="gallery_pics"&gt;&lt;img src="images/before7.jpg" width="300px" height="300px" alt="image coming soon"&gt;&lt;/div&gt;&lt;!--gallery_header--&gt;
     &lt;div class="gallery_pics"&gt;&lt;img src="images/after7.jpg" width="300px" height="300px" alt="image coming soon"&gt;&lt;/div&gt;&lt;!--gallery_header--&gt;
     &lt;div class="gallery_pics"&gt;&lt;img src="images/before8.jpg" width="300px" height="300px" alt="image coming soon"&gt;&lt;/div&gt;&lt;!--gallery_header--&gt;
     &lt;div class="gallery_pics"&gt;&lt;img src="images/after8.jpg" width="300px" height="300px" alt="image coming soon"&gt;&lt;/div&gt;&lt;!--gallery_header--&gt;
     &lt;div class="gallery_pics"&gt;&lt;img src="images/before9.jpg" width="300px" height="300px" alt="image coming soon"&gt;&lt;/div&gt;&lt;!--gallery_header--&gt;
     &lt;div class="gallery_pics"&gt;&lt;img src="images/after9.jpg" width="300px" height="300px" alt="image coming soon"&gt;&lt;/div&gt;&lt;!--gallery_header--&gt;
     &lt;div class="gallery_pics"&gt;&lt;img src="images/before10.jpg" width="300px" height="300px" alt="image coming soon"&gt;&lt;/div&gt;&lt;!--gallery_header--&gt;
     &lt;div class="gallery_pics"&gt;&lt;img src="images/after10.jpg" width="300px" height="300px" alt="image coming soon"&gt;&lt;/div&gt;&lt;!--gallery_header--&gt;
  
  
                                        
                                   
  
    
    &lt;/div&gt;&lt;!--gallery_pics--&gt;
  &lt;/div&gt;&lt;!--ourwork_gallery--&gt;
  
   &lt;!----------------------------------------------------------------/SEC2----------------------------------------------------------------&gt; 
  
   
   
  &lt;?php
  include_once "inc/footer.php"; 
  ?&gt;
    &lt;script src="js/flickity.pkgd.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>