Why are certain divs disappearing until the browser is resized?

[ShoeLace1291]

I recently started using ThemeCo's Pro theme in wordpress. It has a steep leearning curve. I have been trying to fix this issue for the past 4 days. I am making my site with a single page design. Each of the Pro theme sections serves as a page. I hide all the sections except for the one that's being viewed. When the user clicks on a link in the menu, the corresponding page is shown. The issue is that some of my content is being hidden and I dont know why. The weird thing is that when I show all sections so that you can scroll to see them all, the content displays normally. Then when I add the css to hide all pages except for the active one, lots of stuff breaks. The even weirder part is that if you click the restore down button on your browser and then maximize again, everything displays correctly. To see what I mean in action, click here.

 

This is my CSS:

.x-bar {
  box-shadow: unset !important;
  width: 100%;
}
.entry-wrap {
  background: unset !important;
  box-shadow: unset !important;
}
body:not(.home) .entry-wrap {
    margin-top: 15em;
    margin-bottom: 5em;
}
header .x-bg-layer-upper-image {
  background-position: top !important;
}
.logo {
  width: 12em !important;
  height: auto !important;
  display: block;
  position: absolute;
  top: 2em;
  left: .5em;
}
.x-container.offset {
  margin: 0;
}
.x-container.max {
  max-width: unset !important;
}
.entry-wrap {
  width: 100%;
  min-height: 100vh;
  padding: 0;
} 
.entry-content {
  margin-top: 0;
}
.entry-title {
  display: none;
}
.x-section {
  padding: 0 !important;
}
.cs-content .x-section {
    min-height: 100vh;
}
.cs-content .x-section .x-container {
  width: 50%;
}
.x-section .x-bg {
  position: absolute;
  top: unset;
  bottom: 0 !important;
}
.x-section .x-bg-layer-lower-image, .x-bg-layer-upper-image {
  background-size: 100% auto !important;
}
.x-section .x-bg-layer-lower-image {
  background-position: bottom !important;
}
.x-section .x-bg-layer-upper-image {
  background-position: top !important;
}
#wpcf7-f155-p35-o1 > form > p:nth-child(6) {
  text-align: center;
}
.wpcf7-form-control.wpcf7-text, .wpcf7-form-control.wpcf7-textarea {
  background: none !important;
  border-width: 0px 0px 2px 0px !important;
  border-bottom: 2px solid rgb(1, 34, 61);
  box-shadow: unset;
  color: #fff !important;
}
.tg-grid-wrapper {
  text-align: center;
}
.x-container.max {
  width: 100%;
}
.x-site > .x-container.width {
    width: 100% !important;
}
body {
  background: #01172d; /* Old browsers */
background: -moz-linear-gradient(-45deg, #01172d 0%, #0071bd 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #01172d 0%,#0071bd 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #01172d 0%,#0071bd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  background-position: bottom;
  background-attachment: fixed;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#01172d', endColorstr='#0071bd',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  color: #fff !important;
}
footer {
  position: absolute;
  bottom: 0;
  display: none;
}
h1 {
  color: #29abe2 !important;
}
h2, h3, h4, h5, h6 {
  color: #fff !important;
}
.entry-header .p-meta>span {
  display:none;
}
.x-anchor-toggle {
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    top: 0;
    left: 0;
}
.x-section {
    display: none;
}
.x-section.active {
    display: block !important;
}
@media only screen and (max-width: 768px){
    body {
        font-size: 14px !important;
    }
    .logo-full-width img {
        width: 50% !important;
    }
    .x-text p {
        font-size: 0.75em !important;
    }
    header .x-bar {
        height: 20em !important;
    }
    .entry-content {
        margin-top: 3em;
    }
    .cs-content .x-section .x-container {
        width: 90%;
    }
    .e35-4.x-image img {
        width: 75%;
        margin: 0 auto;
    }
    .e35-6 h1 {
        text-align: center;
    }
    .x-text-headline h1 {
        font-size: 3em;
    }
    .e35-6.x-text .x-text-content-text-primary {
        line-height: 1.0 !important;
        font-size: 2em !important;
        margin: 0.5em 0 0.25em 0 !important;
    }
    .x-bg-layer-lower-image {
        position: fixed;
    }
    body {
        overflow-x: hidden !important;
    }
}
@media only screen and (min-width: 767px) and (max-width: 1200px){
    .cs-content .x-section .x-container {
        width: 90% !important;
    }
}
@media only screen and (min-width: 768px){
    body.home .cs-content .x-section .x-container {
          display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        align-content: center !important;
        min-height: 100vh;
    }
}

How can I fix this? Thanks in advance.

[Funce]

As I've been playing around in your site, I've noticed that your 'missing divs' appear right as you're attempting to leave the particular section. I also noticed that when I attempted to come back to the section, it hid itself again. However, when I attempted to navigate to the 'same' section as the one I was in, all the 'missing divs' were there.

The main one I've noticed is your services page, which when you navigate onto it, the x-card-inner div is set to a height of 16px, when you navigate off, it goes to 295px. Something is off in the JavaScript. Could you look into the theme page transitions? I suspect it might be something there.

[ShoeLace1291]

Yeah I was kinda suspecting it was a JS issue. Most of the JS comes from the Pro theme so this makes it kind of frustrating. 

 

This is the only custom JS that I have written:

(function($){
  $('.nav-link a').on('click', function(e){
    var $target;
    var $link = $(this);
    var $listItem = $(this).parent();
    /* determine which section we're looking for */
    if($listItem.hasClass('products')){
        $target = 'products'
    } else if($listItem.hasClass('services')){
      $target = 'services';
    } else if($listItem.hasClass('blog')){
      $target = 'blog';
    } else if($listItem.hasClass('about')){
      $target = 'about';
    } else if($listItem.hasClass('contact')){
      $target = 'contact';
    } else if($listItem.hasClass('intro')){
      $target = 'intro';
    }
    /* update css on currently active section */
    $('.page.active').removeClass('active', 1000);
    $('.nav-link a.active').removeClass('active');
    /* update css on newly selected section */
    $link.addClass('active');
    $('.page#'+$target).addClass('active', 1000);
    window.dispatchEvent(new Event('resize')); //I added this in the hopes that it would fix the hidden content issue
    e.preventDefault();
  })
  /* Collapse the menu when a link is activated and return the toggler to the hamburger icon. */
  $('.x-menu-collapsed .menu-item a').on('click', function(e){
    $('.x-anchor').removeClass('x-active')
    $('.x-anchor span span span span').attr('style', '')
    $('#e33-4-off-canvas').attr('aria-hidden', true).css('visibility', 'hidden')
  })
  $('.x-anchor-toggle').on('click, touchend', function(){
    $('#e33-4-off-canvas').css('visibility', 'visible')
  })
})(jQuery);

Is there anything in my custom JS that could possibly causing issues?

Edited January 15, 2019 by ShoeLace1291

[Funce]

Looking through the website again, I've noticed that the issue is no longer occurring for me.

Perhaps you've fixed it? Inadvertently?