Issue with Content Cutoff on Mobile – Need Help with Extra Scrolling Room

Hello all,

I hope you're doing well. I'm currently facing an issue on mobile where the content at the bottom of specific pages gets cut off, despite scrolling being enabled on mobile devices. Essentially, I'm trying to allow for a small amount of extra scrolling room so that users can fully view the content at the bottom of the page.
 

Here's the relevant CSS I've tried:


@media screen and (max-width: 640px) {
  /* Enable Scroll on Mobile for Specific Collections */
  #collection-64e3e35b506d620fffbf6ad4,
  #collection-64e3e3f4d0caac53662a68a0,
  #collection-64e3e3fe2c66a21ffdcd157b,
  #collection-64dd2003f0a4be3998c1f3b7 {
    overflow: auto !important;
  }
}

@media screen and (max-width: 640px) {
/* Add Bottom Margin/Padding to Mobile Specific Collections */
  #collection-64e3e35b506d620fffbf6ad4 .main-content,
  #collection-64e3e3f4d0caac53662a68a0 .main-content,
  #collection-64e3e3fe2c66a21ffdcd157b .main-content,
  #collection-64dd2003f0a4be3998c1f3b7 .main-content {
    margin-bottom: 100px; 
    padding-bottom: 50px;
  }
}
 

Unfortunately, adjusting these `margin-bottom` and `padding-bottom` values doesn't seem to resolve the issue. It’s as if the extra scrolling room just won’t activate or render properly on mobile devices.

Has anyone experienced a similar issue, or does anyone have suggestions for how to best tackle this problem? Your insights would be incredibly helpful.

My website: https://mindofalexander.squarespace.com

Thanks for taking the time to read my post, and I look forward to any guidance you can offer!

Gratefully,
Alexander

Bump

To Custom CSS

/* About Me - Mobile */
@media screen and (max-width:767px) {
.fe-64e40e11229a7624051cd2e8 {
    grid-template-rows: repeat(50,minmax(24px, auto)) !important;
}
}

5 minutes ago, tuanphan said:

To Custom CSS

/* About Me - Mobile */
@media screen and (max-width:767px) {
.fe-64e40e11229a7624051cd2e8 {
    grid-template-rows: repeat(50,minmax(24px, auto)) !important;
}
}

 

Hey there! Thanks for this any chance you could tweak it so that it works across the My Experience and Let's Work Together pages as well? Thanks!

I also noticed the 4 content pages on mobile are totally misaligned with a bottom scroll bar. Anyway to fix this?

Do you use Personal/Business or Commerce Plan?

1 minute ago, tuanphan said:

Do you use Personal/Business or Commerce Plan?

I use the Personal-Business Plan.

Try this same code to My Experience & Let works Page Header, if it doesn't work, I will check & give another code

<style>
@media screen and (max-width:767px) {
article section:first-child .fluid-engine {
    grid-template-rows: repeat(50,minmax(24px, auto)) !important;
}
}
</style>

7 hours ago, tuanphan said:

Try this same code to My Experience & Let works Page Header, if it doesn't work, I will check & give another code

<style>
@media screen and (max-width:767px) {
article section:first-child .fluid-engine {
    grid-template-rows: repeat(50,minmax(24px, auto)) !important;
}
}
</style>

The approach worked well for the "My Experience" page, although it initially caused excessive white space—which I have since corrected. Unfortunately, the same approach doesn't seem to work for the "Let's Work Together" page.

I'm also facing issues with the mobile versions of several pages, specifically /jlove-tv, /trimark, /simple-haven, and /odd-fellows-barber-co. A scrollbar is appearing at the bottom and the content is misaligned from the viewport. If this is not the appropriate forum for these concerns, I can create a separate forum post to address them.

For more details, please refer to the attached screenshot.

Thank you for your assistance, @tuanphan

Bump

1 hour ago, tuanphan said:

With Let's Work Together, you can increase number, I think 51 or 52 is fine

Scroll bar, for eg jlove-tv, because you have this code

#item-64dd2003f0a4be3998c1f3d1 {
    width: 1250px;
    margin: 0em auto 0 auto;
}

1250px > mobile screen width, so it causes problem. You can fix by adding this code under to reset width on mobile

@media screen and (max-width:767px) {
body#item-64dd2003f0a4be3998c1f3d1 {
    width: 100% !important;
}
}

 

Thanks again for the help with this one @tuanphan