Needing Help with CSS on Mobile Slider

Ask the Community Customization
1

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!

IMG_4367.PNG
IMG_4367.PNG1320×2868 133 KB

2

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.

IMG_9046.PNG
IMG_9046.PNG1206×2622 107 KB

1 Like
4

Hi there, @lwaterskatz :waving_hand:

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

image
image1259×866 158 KB


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 :slightly_smiling_face:

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

5

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. :frowning:

1 Like
6

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:

image
image1867×988 161 KB

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 :slightly_smiling_face:

7

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?

8

Unfortunately no such luck with the photo gallery widgets.

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

Leah Waters-Katz Production Designer and Set Decorator
Leah Waters-Katz Production Designer and Set Decorator1320×2868 249 KB

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.

9

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!

10
  1. Could you please clarify what code you used?

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

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

image
image711×247 10.8 KB

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 :slightly_smiling_face: