Jump to content

Mobile Portfolio home page issue - scrolling 7.1

Recommended Posts

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!)

Edited by onederland
Link to comment
  • Replies 9
  • Views 286
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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;
    }
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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?

Link to comment

Looks like the overset scrolling issue has been resolved.

image.thumb.png.0d67a56103e29dfcde4a250b9aa7e225.png

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
1 hour ago, Ziggy said:

Looks like the overset scrolling issue has been resolved.

image.thumb.png.0d67a56103e29dfcde4a250b9aa7e225.png

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? 

Link to comment

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;
}

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.