Needing Help with CSS on Mobile Slider

[lwaterskatz]

Hey there friends!

I am tremendously struggling with some issues on the mobile configuration for the slider. First off when on an IPhone Pro Max, the font will not update and remains HUGE. Second off I keep getting this weird scroll effect where I can scroll well past the text (as if the container surpasses the text) and then end up with a huge amount of dead space?

It’s making the plug-in seem super glitchy on mobile. @Max is there anyway you could possibly take a peek and see what’s going on? I 100% trust your expertise in making it look and work well in mobile. As long as a visitor can see most of the image and the text is there and I am not able to scroll into a weird dead space I would be so happy!

[lwaterskatz]

Here is the dead space scrolling issue. The font size is actually working for this one since it is a regular IPhone Pro…I have a feeling the previous issue requires specific resolution targeting.

[Max]

Hi there, @lwaterskatz

The empty space at the bottom of the Slider appears because of this CSS codes that add the bottom margin:

If you remove these codes, the spacing will disappear. If you want to keep the bottom margin for desktop and reduce it for mobile, just reduce the bottom margin value in the last code

As for the font size issue, I’ll check it with the devs and will let you know once I have any news.

[lwaterskatz]

Hey there @Max I wanted to add to this and point out I am having the same issue with the photo gallery widgets overlay text and even the portfolio overlay text as well on an IPhone 15 Pro Max. The CSS will not target the text size no matter how much I try.

[Max]

I couldn’t find the page with the Photo Gallery widget, but in the Portfolio widget the issue appears because of the CSS code you’re using:

These codes apply the same font size to the desktop and mobile version. If you want to apply the code to the mobile only, you should add @media (max-width: 500px) at the beginning. Here is how the code will look:

@media (max-width: 500px) {
.eapp-portfolio-project-look-overlay-name {
  padding: 15px!important;
  font-size:45px;
  font-family: 'Retro';
}
}

To apply the code to the desktop version only, please replace max-width with min-width. I guess the same issue is with the Photo Gallery widget.

Please check it out and let me know if it helped

[lwaterskatz]

Thank you so much @Max! finally got it to work! I managed to apply this same code to the slider plugin, but what is sooo weird is when I apply it, it works great on the first slide, but the other 2 don’t have the code apply. Am I targeting the wrong block for the other two slides?

[lwaterskatz]

Unfortunately no such luck with the photo gallery widgets.

Leah Waters-Katz | Production Designer and Set Decorator

They are towards the bottom of the page within the Will Meyers Tabs widget.

Because the font is already so small in this section, I wouldn’t necessarily mind turning off the hover function either and just having the info be found within the pop up.

[lwaterskatz]

Lastly there is a very strange glitch happening on the mobile end with the slider. Where when the homepage loads and all you see if the squarespace section background. The moment you go to scroll down the slider appears lol. I am so sorry for all of the questions @Max!

[Max]

1. Could you please clarify what code you used?

@lwaterskatz

I managed to apply this same code to the slider plugin, but what is sooo weird is when I apply it, it works great on the first slide, but the other 2 don’t have the code apply.

2. This CSS code will help you set a different font size for the image title and description on mobile:

@media (max-width: 500px) {
.eapp-photo-gallery-info-title {
  font-size: 17px;
}
}

@media (max-width: 500px) {
.eapp-photo-gallery-info-description {
  font-size: 14px;
}
}

3. This delay occurs because of the data-elfsight-app-lazy attribute in the widget’s installation code:

This attribute ensures that the widget only appears on the page after the user interacts with it, which helps enhance the website’s performance.

If you’d like the chat to appear on mobile devices right away, please remove the data-elfsight-app-lazy attribute from the widget’s installation code

[lwaterskatz]

Thank you! removing the lazy app did the trick for that delay!

Unfortunately I think adding that code to the tabs plugin isn’t working. Is there a way just to completely turn the hover off for mobile so that a visitor can just click the image and have the information displayed there?

As for the code I used for the slider where the 2nd and 3rd slide don’t seem to be working, here it is…

@media (max-width: 500px){
[class*=“Block__BaseBlock-sc”]:nth-child(1) * {
font-size:30px!important;
}
}
@media (max-width: 500px){
[class*=“Block__BaseBlock-sc”]:nth-child(2) * {
font-size:25px!important;
}
}
@media (max-width: 500px){
[class*=“Block__BaseBlock-sc”]:nth-child(4) * {
font-size:15px;
}
}
@media (max-width: 500px){
[class*=“Block__BaseBlock-sc”]:nth-child(6) * {
font-size:15px;
}
}

[Max]

Hi there, @lwaterskatz

I’ve checked the code to reduce the size of the image title and description on mobile and everything works fine.

With the code:

Without code:

Could you please double-check it? If you’d still prefer to disable hover on mobile, please let me know. I’ll be happy to check if it’s feasible

As for the Slider code, it’s also working on my end:

Could you please also double-check it?

[Max]

Hi there, @lwaterskatz

The issue with the text resizing on iPhone Pro Max was resolved. Please check it out and let me know if it’s fine now