Page 1 of 1

Adding transitions destroys responsive design...

Posted: Tue Nov 30, 2021 8:09 pm
by Bluesman
Hi Pablo or other... I have a problem with two layout grids that I use for header in this website I started. Worked very well until I started to add "transitions". You can see what I mean when schrinking the size of the browser... the objects and menu in the header (layout grids) jumps out of order...?
The transitions I use are sliding in from the sides and start is a bit outside the width of the page.
If I schrink the page and refresh the browser, the objects appear on the right place again.

Website: https://www.chevere.ec/gruporepcon

Any ideas to avoid this behaviour are welcome :roll:

Re: Adding transitions destroys responsive design...

Posted: Tue Nov 30, 2021 8:53 pm
by Pablo
This is logical behvaior, because the scroll transaction place the item outside the viewport.
In the page properties, you can set overflow-x to 'hidden', to hide the scrollbar.

Re: Adding transitions destroys responsive design...

Posted: Tue Nov 30, 2021 9:15 pm
by Bluesman
Pablo wrote: Tue Nov 30, 2021 8:53 pm This is logical behvaior, because the scroll transaction place the item outside the viewport.
In the page properties, you can set overflow-x to 'hidden', to hide the scrollbar.
Hi Pablo...tnx for rapid answer as usual :) I set overflow-x to hidden in the master page where the headers are... it did hide the scrollbar, but the objects in the header still loses there responsiveness when schrinking the page...

If you scroll down so the transitions fullfill movement and then you schrink the size of the browser the header acts correctly...

Re: Adding transitions destroys responsive design...

Posted: Wed Dec 01, 2021 7:11 am
by Pablo
If you need further assistance then please share a DEMO project.

Note: I do not need the complete project because that will only take more time to figure out what you have done.
Basically, I just need a small project with one page and object(s) that are relevant to your question.

Please see this FAQ for further details:
viewtopic.php?f=10&t=82134

Re: Adding transitions destroys responsive design...

Posted: Wed Dec 01, 2021 10:49 am
by Bluesman
Pablo wrote: Wed Dec 01, 2021 7:11 am If you need further assistance then please share a DEMO project.

Note: I do not need the complete project because that will only take more time to figure out what you have done.
Basically, I just need a small project with one page and object(s) that are relevant to your question.

Please see this FAQ for further details:
viewtopic.php?f=10&t=82134
Ok Pablo... I was thinking of this from the beginning, but I use a 3rd party extension from (late [rz]) called "[rz] Top Slider". I wanted you to see this working in original from the beginning. So now when removing this extension the page works correctly with responsiveness.
I have to figure out how to do this function when scrolling the page that hides the upper header and the second header stops (sticky) at the top.
Do you have another solution for this? :)

Re: Adding transitions destroys responsive design...

Posted: Wed Dec 01, 2021 11:05 am
by Pablo
You can also use scroll transitions to show/hide objects on scroll.

For example:
https://www.wysiwygwebbuilder.com/suppo ... veler.html

Re: Adding transitions destroys responsive design...

Posted: Wed Dec 01, 2021 11:12 am
by Bluesman
Pablo wrote: Wed Dec 01, 2021 11:05 am You can also use scroll transitions to show/hide objects on scroll.

For example:
https://www.wysiwygwebbuilder.com/suppo ... veler.html
Ok... tnx Pablo, will try that. Does any of your templates demonstrate this? Just in case you remember... otherwise I will search through them :)

Re: Adding transitions destroys responsive design...

Posted: Wed Dec 01, 2021 11:18 am
by Pablo
The 'Timer Traveler' template uses scroll transitions to hide the header on scroll (via opacity).
https://www.wysiwygwebbuilder.com/suppo ... veler.html

Re: Adding transitions destroys responsive design...

Posted: Wed Dec 01, 2021 11:25 am
by Bluesman
Pablo wrote: Wed Dec 01, 2021 11:18 am The 'Timer Traveler' template uses scroll transitions to hide the header on scroll (via opacity).
https://www.wysiwygwebbuilder.com/suppo ... veler.html
Ok... Muchas Gracias... that was the one I looked for the slides I done for the sideways, so have that downloaded.
Thanks again Pablo

Re: Adding transitions destroys responsive design...

Posted: Wed Dec 01, 2021 11:42 am
by Bluesman
Sometimes you feel stupid... this is such a time :? I was thinking to much. Was just to make the second header (Sticky)... no transitions at all :D
I was taking for given... the second header would jump up over the first when doing this. So did not even test :roll:
Now works perfect...