esveecee

Do bumps work? 👀

Site URL: https://thisisdoer.com/digital

Heyo!

site: thisisdoer.com/digital

I have some tabs on my site that currently stack on two lines. This on my external monitor that is 27 inches. This is the ideal state until the tablet breakpoint.

When the screen resizes to a smaller resolution on a desktop (say a 15inch screen), they break into three lines and become a bit incoherent. 

I've attempted to use flex-basis to make them remain consistently stay on two lines instead of breaking into three. but have not been able to do so.

On tablets and mobile they behave how I'd hoped so I'm not sure what I have bungled.

Any insight would be really great if you have any! 

@tuanphan Hey Tuan, thanks for helping us all. 

I have the preloader and I'd like to make it responsive on mobile. I've tried to add a media query but it doesn't do what I thought it would.  This is the active code on my site. I am using Brine and it is in the Advanced panel of the Index Settings. I hope I can get your help, thanks!

<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: 600px;
  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/5fd687dc674bc6778f41a678/t/60275afab391045d0b964861/1613191930385/sigh+copy.gif");
}
</style>

<script type="text/javascript">
$(window).load(function() {
    $(".logoload").delay(5000).fadeOut("slow");
})
</script>

<script>
$(window).load(function() {
    $('body').css('overflow', 'hidden');
    setTimeout( function() {
        $('body').css('overflow', 'initial');
    }, 5000);
});
</script>

On 11/2/2020 at 3:55 PM, Sera said:

Hi Tuanphan, 

This thread has helped immensely, I'm currently attempting to do the same thing with a gif animation. I'm using the following code and there are a few things that I was hoping to do that I can't seem to adjust:

1. Ensure that the gif animation loads as a full screen animation (to the edges of the browser)
2. Only appears when user clicks on the home page 

Draft Site URL:

https://tangerine-iguana-kwg3.squarespace.com/

Password: MaintainS134!

This is the code I'm currently using, 

Thanks a lot in advance! 

<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: 1400px;
  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/5f7cd6783ecb9850af2831b0/t/5fa032da8b26421e8cfcaf85/1604334299026/Header_Web_Gif.gif");
}
</style>
<script type="text/javascript">
$(window).load(function() {
    $(".logoload").delay(4500).fadeOut("slow");
})
</script>

 

I don't know if you've solved this yet but you need to add the code to your homepage header

Pages > Gear Icon > Advanced > Add there .

This will ensure it loads only on the homepage.