Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

is possible to apply on a fullpage section in “responsive auto-height” mode from a certain viewport and only “auto-height” on another viewport using the methods. #4672

Open
E-Baler opened this issue Nov 14, 2024 · 5 comments
Labels

Comments

@E-Baler
Copy link

E-Baler commented Nov 14, 2024

Hello everyone,

would anyone please know if it is possible to apply on a fullpage section in “responsive auto-height” mode from a certain viewport (1000px for example) and only “auto-height” on mobile (under 500px for example) using the methods.

I have a problem on a section with the parallax effect on laptop that doesn't work in auto-height mode (but works with “responsive auto-height”) and a problem on mobile when I'm in “responsive auto-height” on the size of the section (I want it bigger than the viewport) but works with “auto-height”.

I'm looking for a solution to this problem but maybe I can work around it via methods.

Complicated all that sorry!!!

I'm on elementor.

I've searched for hours on Alvaro's documents, but haven't found anything to point me in this direction.

So if anyone has any ideas or answers,

Thank you!!!

@alvarotrigo
Copy link
Owner

I don't quite understand the problem.

The class fp-auto-height-responsive allows you to apply the automatic height (bigger or smaller than the viewport) to the section where it's applied once the page is on responsive mode (when reaching the threshold defined by responsiveWidth or responsiveHeight).

In your case, can you explain when you are having issues?
When in responsive mode on the section using fp-auto-height-responsive?
Or when responsive is not yet triggered?

@E-Baler
Copy link
Author

E-Baler commented Nov 14, 2024

Thank you Alvaro for your feedback,

I actually have two problems that are one and the same!

A - If I apply the “auto-height” mode to my section - the parallax effect doesn't work above 500px (I disabled it below 500px which is my mobile viewport - thanks to your help).

On the other hand, I can set the height of my section as I like in mobile view without any display problems.
See picture one

Is it normal that the parallax effect doesn't work in “auto-height” mode?

Picture one - Auto height

B - When I apply the “responsive auto-height” mode to the same section to restore the parallax effect above 500px, I can't (or I can't figure out how to) choose the height of my section in mobile view because it creates a display problem.
See picture 2

Picture two - Responsive auto-height

The photos were taken on the same device even if the photo size differs.

I don't know if this makes sense, but unfortunately I can't put the problem online on codepen as you'd like.

For the time being, I think the problem comes from my site and not from fullpage (I said for the time being ;) ).

That's why I was wondering if it was possible to apply the “responsive auto-height” mode and the “auto-height” mode based on screen size to the same section.

@alvarotrigo
Copy link
Owner

Is it normal that the parallax effect doesn't work in “auto-height” mode?

Yeap, that's normal unfortunately.

image

You'll see that message on the parallax demo when moving the mouse over "Compatible?"

I'd suggest you don't use parallax on that section if you are planning to have an auto-height section.

@E-Baler
Copy link
Author

E-Baler commented Nov 14, 2024

Ok, I hadn't been on the examples sorry I'd been concentrating on finding info on the documents you'd put online.
So no solution, I'll have to adapt,
Thanks again for taking the time to reply!

@alvarotrigo
Copy link
Owner

I'd been concentrating on finding info on the documents you'd put online.

Added to the docs! Will be merged in the next release 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants