Disable Interactions on Mobile

[fideliscreative]

I have a looper column grid for my Team page with headshots and names. It has an interaction that makes the Job Title appear under the name on hover. Ther interaction is working perfectly on desktop. You can see it on this page if you scroll down to the Team section https://fideliscreativeagency.com/about/

On mobile the text glitches out when you tap an image. Any idea what is causing this? I might just want to completely disable the interaction on small screen sizes so that all of the information is visible from the start. Is there a way to disable or auto-load the interaction on mobile?

Thanks!

[ruenel]

Hello Josh,

Thanks for writing in! Regretfully the effect module will be applied throughout the screen sizes. We do not have an option that you can disable the effects for mobile or smaller screens only. It will only be possible with custom coding to override the effects on mobile which is by the way beyond the scope of our support. You may need a 3rd party developer if you are not familiar with coding.

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third-party developer.

Best Regards.

[fideliscreative]

Thanks for that info. Any idea why the interaction is broken on mobile?

[sparko]

Also ran into this issue recently. Would be nice to have some kind of toggle for disabling it depending on screen size! @alexander

[tristup]

Hi Josh,

The might be some conflict that causes the interaction issues in the mobile devices.

Thanks

[fideliscreative]

haha yes obviously that is the case. Can you help me out please?

[marc_a]

Hi Josh,

The interaction is not broken on the mobile because to initiate the interaction you need the cursor at the top of the image or mouseover over the image then we all know that there’s no mouseover effects on the mobile. To display the job title always on the mobile, I suggest that you add a custom class to your profile section, profile section column and profile section job title.

Let say for an example, you add custom class name to your section called “about-profile”, then columns called “wrapper-col” and job title called “custom-headlines”.

After adding all the required class name, please add this code in your Pro > Theme Options > CSS

@media(max-width: 768px) {
	.about-profile .wrapper-col .custom-headlines {
		opacity: 1;
	    transform: translate(0px,-20px) translate(0px,0px);
	}
}

That code will only show on mobile view and please see the example structure below:

Please note that custom CSS code is outside the scope of our support. Issues that might arise from the use of custom CSS code and further enhancements should be directed to a third-party developer or you can avail One where we can answer questions outside of the features of our theme.

Hope that helps.

Thank you.

[fideliscreative]

@marc_a Bless you sir. That is super helpful.

Thanks!

[ruenel]

You’re welcome.