Блок отображается в верхней части верхнего блока при первой загрузке и фиксируется при обновлении страницы. В мобильной версии сайта такая же ситуация. Иногда отображается правильно.
Сам сайт подключен к WordPress, оптимизирован с помощью ниндзя Page Speed.
Изменены настройки ниндзя Page Speed, пока безрезультатно.
Как я могу это исправить?
Экран мобильной версии, когда сайт открыт
Экран мобильной версии, после обновления
HTML-код раздела
<section id="protfolio_sec">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs12">
<div class="title_sec">
<h1> </h1>
<h1><?php echo $redux['sportft'];?></h1>
<h2><?php echo $redux['sportfd'];?></h2>
</div>
</div>
<div class="col-lg-12">
<div class="all-portfolios">
<div class="col-sm-6 col-lg-12 col-md-12 col-xs-12 ">
<div class="single-portfolio <?php echo $redux['sportf12'];?>" onclick="window.open('projects/project1')">
<div class="sngl_pricing">
<img class="img-responsive" src="<?php echo $redux['sportf1img']['url'];?>" height ="270" alt="">
<h3>
<?php echo $redux['sportf1'];?>
<p>
<?php echo $redux['sportf11'];?>
</p>
</h3>
</div>
</div>
<div class="single-portfolio <?php echo $redux['sportf22'];?>" onclick="window.open('projects/project2')">
<div class="sngl_pricing">
<img class="img-responsive" src="<?php echo $redux['sportf2img']['url'];?>" height ="270" alt="">
<h3>
<?php echo $redux['sportf2'];?>
<p>
<?php echo $redux['sportf21'];?>
</p>
</h3>
</div>
</div>
<div class="single-portfolio <?php echo $redux['sportf32'];?>" onclick="window.open('projects/project3')">
<div class="sngl_pricing">
<img class="img-responsive" src="<?php echo $redux['sportf3img']['url'];?>" height ="270" alt="">
<h3>
<?php echo $redux['sportf3'];?>
<p>
<?php echo $redux['sportf31'];?>
</p>
</h3>
</div>
</div>
<div class="single-portfolio <?php echo $redux['sportf42'];?>" onclick="window.open('projects/project4')">
<div class="sngl_pricing">
<img class="img-responsive" src="<?php echo $redux['sportf4img']['url'];?>" height ="270" alt="">
<h3>
<?php echo $redux['sportf4'];?>
<p>
<?php echo $redux['sportf41'];?>
</p>
</h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="all-portfolios">
<div class="col-sm-6 col-lg-12 col-md-12 col-xs-12 ">
<div class="single-portfolio <?php echo $redux['sportf52'];?>" onclick="window.open('projects/project5')">
<div class="sngl_pricing">
<img class="img-responsive" src="<?php echo $redux['sportf5img']['url'];?>" height ="270" alt="">
<h3>
<?php echo $redux['sportf5'];?>
<p>
<?php echo $redux['sportf51'];?>
</p>
</h3>
</div>
</div>
<div class="single-portfolio <?php echo $redux['sportf62'];?>" onclick="window.open('projects/project6')">
<div class="sngl_pricing">
<img class="img-responsive" src="<?php echo $redux['sportf6img']['url'];?>" height ="270" alt="">
<h3>
<?php echo $redux['sportf6'];?>
<p>
<?php echo $redux['sportf61'];?>
</p>
</h3>
</div>
</div>
<div class="single-portfolio <?php echo $redux['sportf72'];?>" onclick="window.open('projects/project7')">
<div class="sngl_pricing">
<img class="img-responsive" src="<?php echo $redux['sportf7img']['url'];?>" height ="270" alt="">
<h3>
<?php echo $redux['sportf7'];?>
<p>
<?php echo $redux['sportf71'];?>
</p>
</h3>
</div>
</div>
<div class="single-portfolio <?php echo $redux['sportf82'];?>" onclick="window.open('projects/project8')">
<div class="sngl_pricing">
<img class="img-responsive" src="<?php echo $redux['sportf8img']['url'];?>" height ="270" alt="">
<h3>
<?php echo $redux['sportf8'];?>
<p>
<?php echo $redux['sportf81'];?>
</p>
</h3>
</div>
</div>
</div>
</div>
<div class="post_btn">
<div class="hover_effect_btn" id="hover_effect_btn">
<a href="projects/projects" data-hover="view more post"><span><?php echo $redux['sportfb'];?></span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
`
CSS:
#protfolio_sec ul.filter {
color : #2e2e2e;
}
#protfolio_sec ul.filter li {
color : #666666;
cursor : pointer;
display : inline-block;
font-family : Century Gothic;
font-size : 14px;
margin-right : 5px;
padding : 15px 35px;
position : relative;
}
#protfolio_sec ul.filter li:hover {
color : #36BFF3;
}
#protfolio_sec ul.filter li.active {
border-bottom : 1px solid #00AFF0;
}
#protfolio_sec .all-portfolios {
margin-top : 20px;
margin-left : -10px;
}
#protfolio_sec .single-portfolio {
float : left;
margin-bottom : 10px;
width : 277px;
}
#protfolio_sec .single-portfolio:hover .img_hoverlay {
display : block;
}
JS код после нижнего колонтитула
`
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="<?php bloginfo('template_directory');?>/js/vendor/jquery-1.11.3.min.js"></script>
<script src="<?php bloginfo('template_directory');?>/js/isotope.pkgd.min.js"></script>
<script src="<?php bloginfo('template_directory');?>/js/bootstrap.min.js"></script>
<script src="<?php bloginfo('template_directory');?>/js/appear.js"></script>
<script src="<?php bloginfo('template_directory');?>/js/jquery.counterup.min.js"></script>
<script src="<?php bloginfo('template_directory');?>/js/waypoints.min.js"></script>
<script src="<?php bloginfo('template_directory');?>/js/owl.carousel.min.js"></script>
<script src="<?php bloginfo('template_directory');?>/js/showHide.js"></script>
<script src="<?php bloginfo('template_directory');?>/js/jquery.nicescroll.min.js"></script>
<script src="<?php bloginfo('template_directory');?>/js/jquery.easing.min.js"></script>
<script src="<?php bloginfo('template_directory');?>/js/scrolling-nav.js"></script>
<script src="<?php bloginfo('template_directory');?>/js/plugins.js"></script>
<script src="<?php bloginfo('template_directory');?>/js/main.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
, а затем
<script type="text/javascript">
$(document).ready(function(){
$('.show_hide').showHide({
speed: 1000,
easing: '',
changeText: 1,
showText: 'View',
hideText: 'Close'
});
});
</script>
<script>
jQuery(document).ready(function( $ ) {
$('.counter').counterUp({
delay: 10,
time: 1000
});
});
</script>
<script>
//Hide Overflow of Body on DOM Ready //
$(document).ready(function(){
$("body").css("overflow", "hidden");
});
// Show Overflow of Body when Everything has Loaded
$(window).load(function(){
$("body").css("overflow", "visible");
var nice=$('html').niceScroll({
cursorborder:"5",
cursorcolor:"#00AFF0",
cursorwidth:"3px",
boxzoom:true,
autohidemode:true
});
});
</script>