Issue with #GridThumbs Not Fitting Properly on Mobile and Getting Cut Off

Hello talented developers,

The Problem:

I am having an issue with the `gridthumbs` on my website. While it works perfectly on desktop, there are two specific issues on mobile:

1. Header Spacing: The gridthumbs are not fitting flush between the header (which is in the footer position) and the viewport.
2. Cut-off Issue: The last gridthumb is being cut off at the bottom, disrupting the visual flow.

Below is the existing CSS code that is governing the gridthumb behavior:

/* Full Bleed Image Grid */
#gridThumbs {
  width: 100vw;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
@media screen and (min-width: 640px) {
  #gridThumbs .grid-item, #gridThumbs .grid-image {
    padding-bottom: 42.5vh !important;
  }
}
.portfolio-grid-overlay .portfolio-overlay {
  background-color: rgba(0, 0, 0, 0.80);
}
.grid-image img {
  transition: filter 0.3s ease, transform 0.5s ease;
}

/* Only apply the hover effect for screens larger than 640px */
@media screen and (min-width: 640px) {
  .grid-item:hover .grid-image img {
    filter: blur(2px);
    transform: scale(1.05);
  }
}

.portfolio-grid-overlay .portfolio-title {
  color: #FFFFFF;
}

I'm looking to modify this existing code so that:

- On mobile, the gridthumbs fit snugly between the header (in the footer position) and the viewport without requiring the user to scroll.
- The existing desktop layout remains unchanged.

Questions:

1. Is there a CSS modification I can apply to achieve this?
2. Are there any alternative approaches to resolving this issue while keeping the desktop layout intact?

Please see screenshot for example
My Website: https://mindofalexander.squarespace.com

I would greatly appreciate any guidance or solutions to fix these issues.

Thank you for your time and assistance!

Gratefully,
Alexander

Bump

You need something like this:

@media only screen and (max-width:640px) {
  .tweak-portfolio-grid-overlay-image-aspect-ratio-ultra-widescreen .portfolio-grid-overlay .grid-item {
    padding-bottom: 20vh !important;
  }
}

3 hours ago, Ziggy said:

You need something like this:

@media only screen and (max-width:640px) {
  .tweak-portfolio-grid-overlay-image-aspect-ratio-ultra-widescreen .portfolio-grid-overlay .grid-item {
    padding-bottom: 20vh !important;
  }
}

Hello @Ziggy

Thank you so much for your quick response and proposed solution to the `gridthumbs` issues I mentioned!

Your solution appeared to fix the issues when I checked using the PC's mobile view. However, when I tested it on an actual mobile device—in this case, an iPhone 12 Pro Max—I still encountered the same problems.

The header spacing and the cut-off of the last gridthumb still occur on the actual mobile device, as you can see in the attached sample photo. While the emulated mobile view on the PC suggests that the issue is fixed, that isn't the case on the real device.

1. Have you or anyone else encountered this sort of discrepancy before between an emulated mobile view on PC and an actual mobile device?
2. Do you have any suggestions for why this might be happening, and how to resolve it?

I've cleared my browser cache and made sure everything is up-to-date, so those shouldn't be the underlying issues.

I appreciate your time and look forward to your thoughts on how to truly resolve this.

Thanks again for the help!

Did you try adjusting the padding value until you're happy with the sizing?

9 minutes ago, Ziggy said:

Did you try adjusting the padding value until you're happy with the sizing?

@Ziggy

Thanks for your suggestions. Adjusting the `padding-bottom` did help somewhat, but it's not fully solving the issue. Higher `vh` values create too much spacing, while lower values cause content to overlap or get cut off.

1. Have you encountered discrepancies between PC emulated mobile views and actual mobile devices?
2. Could this be a browser-specific issue?
3. Any further troubleshooting tips?

Here's a screenshot at 18.5vh, showing the issue. Appreciate any more insights.

1 minute ago, mindofalexander said:

Have you encountered discrepancies between PC emulated mobile views and actual mobile devices?

Of course, the emulator gives you one size and one resolution, there are hundreds of different phones running different browsers and with wildly varying user resolutions and scaling setups.

The vh value should be reasonably responsive to the viewport height, but it's not the only factor that sets the height of the elements which is why you are seeing a small amount of variation.

3 minutes ago, Ziggy said:

Of course, the emulator gives you one size and one resolution, there are hundreds of different phones running different browsers and with wildly varying user resolutions and scaling setups.

The vh value should be reasonably responsive to the viewport height, but it's not the only factor that sets the height of the elements which is why you are seeing a small amount of variation.

Thank you for shedding light on the complexities of varying devices and browsers. As a graphic designer branching into coding and web development, I'm still navigating these nuances. If I seem a bit uninformed at times, please know it's a part of my learning curve, and your expertise is truly invaluable to me.

Your point about the variety of user resolutions and scaling setups makes sense. Given that there isn't a one-size-fits-all solution, what would you recommend as the best approach to ensure the `gridthumbs` look good across as many devices as possible? Is the `vh` value the deepest we can go in terms of responsive design, or are there additional methods to explore?

Thank you for your patience and guidance @Ziggy

1 hour ago, mindofalexander said:

Here's a screenshot at 18.5vh, showing the issue. Appreciate any more insights.

What's the issue here?

41 minutes ago, Ziggy said:

What's the issue here?

Some of the blocks are overlapping each other.

If you want them to fill the space then there is going to be an amount of cropping involved.

8 hours ago, Ziggy said:

If you want them to fill the space then there is going to be an amount of cropping involved.

@Ziggy 

You mentioned that "there is going to be an amount of cropping involved" and that the `vh` value might not be the only factor affecting the layout. While I understand that achieving perfection across all devices might be a tall order, I’m interested in pushing the boundaries of what’s possible to ensure the best user experience. 

Would you be able to recommend any alternative approaches that could further refine the layout? I’ve heard that CSS Grid and Flexbox offer more layout control—do you think those could be useful in this situation? Or maybe some JavaScript to dynamically adjust the layout based on actual rendered sizes?

Your expertise is highly valued, and I'm eager to explore all available solutions to make the layout as universally friendly as it can be.

Bump

I'm not sure I fully understand what you want it to look like.

3 minutes ago, Ziggy said:

I'm not sure I fully understand what you want it to look like.

Hi @Ziggy

Again I want to express how much I appreciate your time and expertise. To clarify, my goal is relatively straightforward. I'm looking to design tabs that:

1. Do not overlap each other.
2. Have consistent, appropriate sizes.
3. Sit flush between the viewport and header—essentially in the footer position.
4. House the content without any distortion, regardless of the screen size.

I'm really eager to explore all available solutions to achieve a layout that is as universally friendly as possible. If CSS Grid, Flexbox, or some JavaScript could make this more achievable, I'm all ears.

Looking forward to your recommendations!

I'm not sure this combination is actually achievable. I'm sorry I'm not able to give you a solution for all of those requirements.

On 9/5/2023 at 5:13 PM, Ziggy said:

I'm not sure this combination is actually achievable. I'm sorry I'm not able to give you a solution for all of those requirements.

@Ziggy

I understand that forums like these offer no obligation for anyone to provide comprehensive solutions, and I appreciate your time.

However, I have to respectfully disagree with the idea that my goals are unachievable. There are websites that exhibit the design features I'm aiming for, so I know it's possible. If you have any insights or would like to revise your thoughts, I'd be grateful to hear them. If not, that's completely okay, and I appreciate your initial attempts to help.

I'll continue to explore other avenues and consult various experts to achieve the desired outcome. Thanks again for your time and effort in this forum.

Sounds like a good idea, sorry I couldn't help further.