Mobile Portfolio home page issue - scrolling 7.1

Hi! I just launched my site - www.onederlandevents.com - and can see that on mobile I'm getting a weird zoom on the portfolio main page which is set to my homepage. there is also scrolling which shouldn't be there. i removed the footer , but this scrolling issue popped up only once I launched site. I tried changing the font size of the h1.portfolio-hover-item-title which helped some - but  just don't want this scroll effect. I am reviewing site on an Android device for cell and using mac for desktop. 

Portfolio Page CSS: 

<style>
  /* remove footer */
  footer.sections {display: none;}

  @media screen and (max-width:767px) {
h1.portfolio-hover-item-title {
    font-size: 40px !important;
}
</style>

Any help would be appreciated!

Thanks!!

( @tuanphan any thoughts? your codes always work!)

Can you share your website URL so someone can have a look?

rookie mistake!  just edited the main post also  - www.onederlandevents.com

Is your domain connected? It doesn't load for me.

13 minutes ago, Ziggy said:

Is your domain connected? It doesn't load for me.

 

www.onederlandevents.com  (i had an extra "e" in there before)

Try this CSS to limit the title font size instead:

@media only screen and (max-width:767px) {
    h1.portfolio-hover-item-title {
        font-size: 12vw !important;
    }
}

27 minutes ago, Ziggy said:

Try this CSS to limit the title font size instead:

@media only screen and (max-width:767px) {
    h1.portfolio-hover-item-title {
        font-size: 12vw !important;
    }
}

 

thanks ziggy - i updated that but still scrolling image. i just want to home page only to just show full image no scroll. any thoughts there? are you seeing the same thing on your mobile device?

Looks like the overset scrolling issue has been resolved.

If you're still seeing the issue, you can try reducing the 12vw to 10vw

1 hour ago, Ziggy said:

Looks like the overset scrolling issue has been resolved.

If you're still seeing the issue, you can try reducing the 12vw to 10vw

ok so after much testing it seems like this is only happening on android devices. when you move between the other pages and then back to the home page -its doing a weird snapping effect of the the home page background and text.  could this be a screen size issue or something? 

Site URL: www.onederlandevents.com

Updated support response from squarespace: 

I took a look at your case with my team and we were able to replicate the issue you're seeing. However, after further testing on our test sites, it seems that the code you added to your custom CSS is causing this issue on your site. Troubleshooting code falls outside our scope of support, so we can’t pinpoint the exact issue with the code. However, when we copy and pasted the code onto a test site, we were able to replicate the same issue there and the same issue was only visible on an Android during our testing. This indicates that the code is causing or contributing to the issue on your site.
 

We tested both the code in the code injection on the Portfolio page on it's own as well as the code in the Custom CSS. When testing without the Custom CSS code, the page does not exhibit the strange zoom in and out behavior when scrolling. However when testing with both the code injection and the Custom CSS, we see the same behavior on our test sites. It was only after adding the additional Custom CSS we see the issue on our test site which leads us to believe there may be something in the Custom CSS code that is causing the issue. 

Can someone take a look to see what might be causing this? See both Portfolio Page CSS and Custom CSS below.  Again this is only happening on Android. Thanks in advance!! 

Portfolio Page CSS: 

<style>
  /* remove footer */
  footer.sections {display: none;}

  @media only screen and (max-width:767px) {
    h1.portfolio-hover-item-title {
        font-size: 12vw !important;
    }
}
</style>

Custom CSS

/* Portfolio item hover */
a.portfolio-hover-item:hover span {
    color: #E01883 !important;
}  

@font-face {
  font-family: Tranquilo Bold;
  src: url(https://static1.squarespace.com/static/6629d0f21538a17914242422/t/66538629ce25eb50f6d2d648/1716749865741/Tranquilo+Bold.otf);
}

//portfolio title font//
h1.portfolio-hover-item-title {font-family: tranquilo bold !important;} 

h1.portfolio-hover-item-title {font-size: calc(3.0rem) !important;}

h1 {
font-family: 'Tranquilo Bold';
}

h2 {
font-family: 'Tranquilo Bold';
}

h3 {
font-family: 'Tranquilo Bold';
}

h4 {
font-family: 'Tranquilo Bold';
}

.header-nav-item a, .header-menu-nav-item a {
  font-family: Tranquilo Bold !important;
}

.item-pagination-title {
  font-family: Tranquilo Bold
}

@font-face {
font-family: 'Tranquilo Bold';
src: url(https://static1.squarespace.com/static/6629d0f21538a17914242422/t/66538629ce25eb50f6d2d648/1716749865741/Tranquilo+Bold.otf);
}
h2.item-pagination-title {
    font-family: 'Tranquilo Bold' !important;
}

.blog-title {
  font-family:'Tranquilo Bold'!important}

.entry-title {font-family:'Tranquilo Bold'!important}

/* Pagination color */
.item-pagination * {
    color: #ec008c !important;
}