Wanderdoll

Thank you!

Site URL: https://parakeet-alligator-y4sy.squarespace.com/

Hi everyone, I have four overlap images in columns with buttons at the bottom and I'd like the buttons to bottom align even if there is different lengths of text. Any thoughts?

Site password is TrishSullivan

On 8/5/2020 at 11:14 AM, tuanphan said:

Just solved for 3 members. Add all to Code Block

<div class="container">
  <h1>
    typewriter01 |
    <!-- The words that we want to have typerwriter effect -->
    <span class="txt-type" data-wait="3000" data-words='["consultancy", "food", "creative tech", "ranj"]'></span>
  </h1>
</div>
<style>
/* CSS RESET */

/* ALIGN CONTENT */
.container {
  display: flex;
  /* Remove horizontal 'justify-content' center if you want the base text not to move */
  justify-content: center;
  align-items: center;
}

/* ADD CURSOR */
.txt-type > .txt {
  border-right: 0.08rem solid #fff;
  padding-right: 2px;
  /* Animating the cursor */
  animation: blink 0.6s infinite;
}

/* ANIMATION */
@keyframes blink {
  0% {
    border-right: 0.08rem solid rgba(255, 255, 255, 1);
  }
  100% {
    border-right: 0.08rem solid rgba(255, 255, 255, 0.2);
  }
}
  #page .section-background {background: white;}
  #page section * {color: black !important;}
  #page .content {
    width: 100%;
}
</style>
<script>
class TypeWriter {
  constructor(txtElement, words, wait = 3000) {
    this.txtElement = txtElement;
    this.words = words;
    this.txt = "";
    this.wordIndex = 0;
    this.wait = parseInt(wait, 10);
    this.type();
    this.isDeleting = false;
  }

  type() {
    // Current index of word
    const current = this.wordIndex % this.words.length;
    // Get full text of current word
    const fullTxt = this.words[current];

    // Check if deleting
    if (this.isDeleting) {
      // Remove characters
      this.txt = fullTxt.substring(0, this.txt.length - 1);
    } else {
      // Add charaters
      this.txt = fullTxt.substring(0, this.txt.length + 1);
    }

    // Insert txt into element
    this.txtElement.innerHTML = `<span class="txt">${this.txt}</span>`;

    // Initial Type Speed
    let typeSpeed = 50;

    if (this.isDeleting) {
      // Increase speed by half when deleting
      typeSpeed /= 2;
    }

    // If word is complete
    if (!this.isDeleting && this.txt === fullTxt) {
      // Make pause at end
      typeSpeed = this.wait;
      // Set delete to true
      this.isDeleting = true;
    } else if (this.isDeleting && this.txt === "") {
      this.isDeleting = false;
      // Move to next word
      this.wordIndex++;
      // Pause before start typing
      typeSpeed = 500;
    }

    setTimeout(() => this.type(), typeSpeed);
  }
}

// Init On DOM Load
document.addEventListener("DOMContentLoaded", init);

// Init App
function init() {
  const txtElement = document.querySelector(".txt-type");
  const words = JSON.parse(txtElement.getAttribute("data-words"));
  const wait = txtElement.getAttribute("data-wait");
  // Init TypeWriter
  new TypeWriter(txtElement, words, wait);
}

</script>

Notes: Haven't tested with SS 7.0

On 4/4/2020 at 12:45 AM, tuanphan said:

Add to Code Block

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.typeit/4.4.0/typeit.min.js"></script>
<script>
$('#ssforum).typeIt({
     strings: ["Small businesses.","Entrepreneurs.","Go-getters." ,"Visionaries." ,"Creatives."],
     speed: 150,
     breakLines: false,
     autoStart: false,
  loop: true,
  startDelay: 250,
  loopDelay: 750,
  startDelete: false,
});
</script>
<h1 id="ssforum" class="type2">
  <i class="ti-placeholder" style="display:inline-block;width:0;line-height:0;overflow:hidden;">.</i>
  <span style="display:inline;position:relative;font:inherit;color:inherit;" class="ti-container">Small businesses</span>
  <span style="display: inline; position: relative; font: inherit; color: inherit; opacity: 0.993343;" class="ti-cursor">|</span>
</h1>

 

@tuanphanJust add these two to code blocks? Nothing to put into Code Injection or Custom CSS?

1 hour ago, Wanderdoll said:

https://oval-buffalo-n69g.squarespace.com/our-team

Found a solution: 

@media screen and (max-width:640px) {.transparent-header.collection-type-page .banner-thumbnail-wrapper {
    padding: 0;
}
}

@tuanphan, I tried this out on mine as well and it was super helpful. However, I was curious, how would you target the secondary text here and not just the header on the banner?

4 hours ago, tuanphan said:

Can you share site url?

https://oval-buffalo-n69g.squarespace.com/our-team

Similar issue where the banner image is getting cut off. I've tried the previously mentioned code

<style>
  @media screen and (max-width:640px) {
  .banner-thumbnail-wrapper img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
  }
</style>

Which did resize it but created this black bar underneath (see screenshot)

I've since removed that code since I didn't want the black bar, but if you have one that resizes on mobile without creating that black bar please let me know! 

Nevermind, ended up finding it!
Here's the code that worked for anyone seeing this: 

@media only screen and (max-width: 420px) {  .image-block .design-layout-poster .image-inset {    padding-bottom: 100% !important;  }}

The text on the poster expands beyond my image. How would I remove the image on mobile sites if the text is too large for it?