Display issue on my website during the breakpoint

Hello Webflow team,

I am writing to address an unusual issue on my website. I have created a video to illustrate the problem:

I have conducted some research to resolve this matter, but unfortunately, I have not been able to find a solution. I would greatly appreciate your assistance and prompt response. If possible, kindly provide me with some pointers to enhance my investigation.

Website link:

Thank you for your attention to this matter. Have a wonderful day.

Best regards from France.

Hey @AlexisFrance welcome to the forum!

Since you didn’t include a “read only link” to your Webflow build it’s tough for most people to help you here. (How to Enable a Webflow Share Link)

I’ve put together a short video though using Chrome developer tools. You can see your elements disapearing on screen and on the right you can see the code changing as we move over the breakpoint.

Loom Video

The important thing to notice is that the code changes from “opacity=1” (visible) to “opacity=0” (not visible) in this time. So your elements are still there you just cant see them.

Without seeing your read only link its gonna be tough to explain why this is happening. I would check the opacity setting at this breakpoint first although I think it’s more likely this is due to an interaction being applied at that breakpoint.

All the best,

Dave

Hello DaveW,

Thank you for your prompt response.
Using Google Web Tools is indeed an excellent initial step for investigation.

I am still unsure why the opacity changes from 1 to 0.
Moreover, I have observed that when the menu is in the hover state, the opacity reverts back to 1. It’s quite a perplexing experience.

If I understand correctly, here is the link I would like to share:
https://preview.webflow.com/preview/adrasys?utm_medium=preview_link&utm_source=dashboard&utm_content=adrasys&preview=1394699afd7a63fe742d8835654050b4&workflow=preview

I sincerely appreciate your assistance.

Best regards,
Alexis

Hey Alexis,

Thanks for your read only link. I can see that the problem is being caused by a page load animation called “About 1 Page Load”.

This animation is applying the intial state of opacity 0 to your elements and then half a second later gives them opacity 1 for a nice fade in effect when the page loads.

The issue is that the animation is only being applied to the tablet and desktop breakpoints. See image:

If you apply the animation to those smaller breakpoints it will fix your issue :slight_smile:

Let me know if you have any other questions,

Dave

Hello Dave.

Hope you’re fine today.

Thanks a lot for your time, your support and your help.
The problem is now fixed.

I didn’t know how to go on those settings.
Again, thank you very much :clap:

Have a great day.
Best reagards.
Alexis