Need help with the final touches on our site - is it ready to launch?

Site URL: https://silver-elephant-jdg7.squarespace.com/

Hi all, I am one of the creators of Insideout Studios. We are newly college grads coming together and are having issues with some of the css in our new site. We typically out source when it comes to code dealing with clients but I decided to take on the project for our new site. I will admit this was challenging but I'm at a place where I'm happy with it. There's just a few issues we are having with css and javascript. We were wondering if anyone is able to assist us please.

1st Issue: We are having trouble with the java script in the hero section of every page. We are trying to make it fade to black instead of white.

2nd Issue: On the home page our service section, we are having trouble with the css mobile view 2 by 2.

3rd Issue: On the about page our process section, we are having trouble with the css mobile view 3 across evenly.

Password: DRAW2

Please feel free to let us know what else there is that you need from us.

Also would love to hear HONEST feedback Thank you! P.S. ignore most descriptions and images, still making changes to the content.

Hi,

You should post this into Coding and Customization category.

What is access password?

Sorry for the late response we had to do some adjusting with CSS.

#1. We would like the hero section for each page to fade to black on scroll. For some reason we can't figure out why it keeps fading to white.

#2. We have removed the previous 2 column code.

#3. On our about page in our process section, we would like the mobile view to display (1.Discuss, 2. Create, 3. Product) evenly across. Our code seems to have it somewhat uneven.

Password: DRAW2

On 10/21/2021 at 7:10 AM, Liek said:

Sorry for the late response we had to do some adjusting with CSS.

#1. We would like the hero section for each page to fade to black on scroll. For some reason we can't figure out why it keeps fading to white.

#2. We have removed the previous 2 column code.

#3. On our about page in our process section, we would like the mobile view to display (1.Discuss, 2. Create, 3. Product) evenly across. Our code seems to have it somewhat uneven.

Password: DRAW2

#1. Which code did you use? I will see if can tweak the code

#2. Add to Design > Custom CSS

/* Mobile-Our Services 2 columns */
@media screen and (max-width:767px) {
div#block-4341b97d3bd04afc7702~.row {
    width: 50% !important;
    float: left !important;
}
}

#3. Add to Design > Custom CSS

/* Mobile-About-Our Process */
@media screen and (max-width:767px) {
div#page-section-60bed03ec57d4b2dc21eba8c .image-block {
    min-height: 70px;
}
}

#1. This is the Code Placed in my footer inject.

<script>  
  var sectionName = document.querySelector(".page-section:first-child");
  function getHeight() {
    return sectionName.clientHeight;
  }
  var gotHeight = getHeight();
  window.onscroll = function() {
    sectionName.style.opacity = 1 - (window.pageYOffset / (gotHeight - 125));
  };
</script>