Jump to content

Removing unwanted black space on mobile

Recommended Posts

Site URL: https://casperkrohn.com

Hi 

im desperate to get some help

i have spent the last days working on my website and got really happy with the result, i was making an animated loading page through codes but didn't like how it looked so i thought i could just delete the codes and everything would be great but now there is a weird black field when i load pages, can you help ?

CasperKrohn.com

Link to comment
  • Replies 37
  • Created
  • Last Reply
14 minutes ago, Casperhj said:

Site URL: https://casperkrohn.com

Hi 

im desperate to get some help

i have spent the last days working on my website and got really happy with the result, i was making an animated loading page through codes but didn't like how it looked so i thought i could just delete the codes and everything would be great but now there is a weird black field when i load pages, can you help ?

CasperKrohn.com

I’m not really seeing any sort of black field.  Is this happening on desktop only or is it just a glitch on sqaurespace or on your computer?

Link to comment
32 minutes ago, inunzi said:

I’m not really seeing any sort of black field.  Is this happening on desktop only or is it just a glitch on sqaurespace or on your computer?

Hmm weird its happening on both mobiles and computers, i have even tried on different computers  and checked after your answer and it is still there ?  

Link to comment
12 minutes ago, Casperhj said:

yeah its the black box 

 

yeah have right clicks disabled to prevent theft of pictures but i have enabled it so you can help 

Can you send me the code that you used to do the loading screen? Because there might be something in the coding that’s messing with it.

Link to comment
2 minutes ago, inunzi said:

Can you send me the code that you used to do the loading screen? Because there might be something in the coding that’s messing with it.

yes of course 

this is the code i have used 

Inject This Code Into the Header

HTML

<!-- Loading Screen --> <div class="loadingscreen"> <span class="loading"><span class="loader-inner"><img class="logo-pulse" src="IMAGE URL" alt="ALTERNATE TEXT"></span></span> </div> <!-- End of Loading Screen -->

 

 

Inject This Code Into the Footer

HTML

<!-- Loading Screen --> <script> window.onload = function() { document.querySelectorAll(".Header").forEach(x => x.style.visibility = "visible"); document.querySelectorAll(".loadingscreen").forEach(x => x.style.display = "none"); }; </script> <!-- End of Loading Screen -->

 

 

Custom CSS

CSS

/* Loading Screen */ .Header { visibility: hidden; } .loadingscreen{ background: #FFF; opacity: 1; z-index: 2000; width: 100%; height: 100vh; } .loadingscreen > .loading { background: #FFF; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .loading img { height: 200px; width: 200px; } .logo-pulse{ animation-name: pulse; -webkit-animation-name: pulse; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes pulse { 0% { transform: scale(0.9); opacity: 0.7; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.9); opacity: 0.7; } } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(0.95); opacity: 0.7; } 50% { -webkit-transform: scale(1); opacity: 1; } 100% { -webkit-transform: scale(0.95); opacity: 0.7; } }
Link to comment
2 hours ago, Casperhj said:

yes of course 

this is the code i have used 

Inject This Code Into the Header

HTML

<!-- Loading Screen --> <div class="loadingscreen"> <span class="loading"><span class="loader-inner"><img class="logo-pulse" src="IMAGE URL" alt="ALTERNATE TEXT"></span></span> </div> <!-- End of Loading Screen -->

 

 

Inject This Code Into the Footer

HTML

<!-- Loading Screen --> <script> window.onload = function() { document.querySelectorAll(".Header").forEach(x => x.style.visibility = "visible"); document.querySelectorAll(".loadingscreen").forEach(x => x.style.display = "none"); }; </script> <!-- End of Loading Screen -->

 

 

Custom CSS

CSS

/* Loading Screen */ .Header { visibility: hidden; } .loadingscreen{ background: #FFF; opacity: 1; z-index: 2000; width: 100%; height: 100vh; } .loadingscreen > .loading { background: #FFF; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .loading img { height: 200px; width: 200px; } .logo-pulse{ animation-name: pulse; -webkit-animation-name: pulse; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes pulse { 0% { transform: scale(0.9); opacity: 0.7; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.9); opacity: 0.7; } } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(0.95); opacity: 0.7; } 50% { -webkit-transform: scale(1); opacity: 1; } 100% { -webkit-transform: scale(0.95); opacity: 0.7; } }

Hmm the code seems ok. So did you delete the full code off of your site?

Link to comment
2 minutes ago, Casperhj said:

yeah sure 

 

I am not sure if you are on sqsp 7.1 or on 7.0 so I’m not sure this would work for you. But, it doesn’t hurt to test it😁. Add this code to your footer code injection. Thank you for this code tuan! Let me know how it goes.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="logoload"></div>
<style>
.logoload {
  /* SET BACKGROUND COLOR */
  background-color: #fff;
  /* SET BACKGROUND SIZE */
  background-size: 90px;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("https://static1.squarespace.com/static/5d2b34d977f80900014edb0d/t/5db97e10780a6c1bc1b16e3e/1572427397438/?format=1500w");
}
</style>
<script type="text/javascript">
$(window).load(function() {
    $(".logoload").delay(500).fadeOut("slow");
})
</script>
Link to comment
5 minutes ago, inunzi said:

I am not sure if you are on sqsp 7.1 or on 7.0 so I’m not sure this would work for you. But, it doesn’t hurt to test it😁. Add this code to your footer code injection. Thank you for this code tuan! Let me know how it goes.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="logoload"></div>
<style>
.logoload {
  /* SET BACKGROUND COLOR */
  background-color: #fff;
  /* SET BACKGROUND SIZE */
  background-size: 90px;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("https://static1.squarespace.com/static/5d2b34d977f80900014edb0d/t/5db97e10780a6c1bc1b16e3e/1572427397438/?format=1500w");
}
</style>
<script type="text/javascript">
$(window).load(function() {
    $(".logoload").delay(500).fadeOut("slow");
})
</script>

unfortunately it doesn't seem to work.  im on 7.0 if that changes anything ?

Link to comment
  • violettag changed the title to Removing unwanted black space on mobile

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.