XF 2.1 Multiple Adverts only Loading on Mobile After Scrolling

[Chris Radford]

Hi All,

Run into an issue with 2 ads above the fold. They load immediately via desktop, however on mobile they only appear once you start scrolling the page.

URL: https://www.thefootballforum.net

We have made some changes recently relating to Expired Headers and Browser Caching, could this be the cause?

 

[Paul B]

We have made some changes recently relating to Expired Headers and Browser Caching, could this be the cause?

Most likely.

Revert the changes and see what difference it makes.

 

[Chris Radford]

Thanks @Brogan

I found the culprit. I've disabled it and it's resolved the issue. Can anybody see the issue with the code as I'd prefer not to keep this permanently disabled?

Below is code for a "push down" advert which loads at the very top of screen and can be dismissed.

<div class="push-down-box">
  <div class="row">
    <div class="col-md-12" align="right">
      <a href="#" class="close-btn"><i class="fa fa-times p-r-10" aria-hidden="true"></i>Close</a>
    </div>
  </div>
    <div class="row">
    <div class="col-md-12" align="center">
       <a href="https://www.gambling-affiliation.com/cpc/v=nZc2yCPB5EXCYCoQBomtsOrXh7HkEO7RUjft42f-N2c_GA7331V2"><img src="https://static.gambling-affiliation.com/uploads/ads/54300.gif" class="img-resposive"></a>
    </div>
  </div>
    <div class="row">
    <div class="col-md-12" align="right">
      <a href="#" class="close-btn bg-black"><i class="fa fa-times p-r-10" aria-hidden="true"></i>Close</a>
    </div>
  </div>
</div>




<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">

 


  <style type="text/css">
.push-down-box {
  margin-top: -321px;
  margin-bottom:30px;
  padding: 15px;
  -webkit-transition: margin-top 1s ease-out;
  -moz-transition: margin-top 1s ease-out;
  -o-transition: margin-top 1s ease-out;
  transition: margin-top 1s;
}

.push-down-box:hover {
  cursor: pointer;
}


.pushed{
  background-color: white;
   margin-top: 0px;
}
.close-btn{
  float:right;
  color:red;
  font-size: 16px;
  padding-right: 30px;
  font-weight: bold;
}
.close-btn:hover{
  color:red;
  text-decoration: none;
}
.bg-black{
  background-color: black;
  padding: 10px;
  border-radius: 10px;
  margin-right: 20px;
}
.p-r-10{
  padding-right: 5px;
}
  </style>


<script>


  $('.close-btn').click(function(event){
  event.preventDefault();
  $('.push-down-box').toggleClass('pushed');
});



$(document).ready(function() {
  $('.push-down-box').toggleClass('pushed').delay(1000);
});

</script>