Adding transitions destroys responsive design...

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Post Reply
User avatar
Bluesman
 
 
Posts: 1116
Joined: Mon Feb 01, 2016 5:43 pm
Location: Sweden
Contact:

Adding transitions destroys responsive design...

Post 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:
"Make My Day"

See my Website
User avatar
Pablo
 
Posts: 21575
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Adding transitions destroys responsive design...

Post 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.
User avatar
Bluesman
 
 
Posts: 1116
Joined: Mon Feb 01, 2016 5:43 pm
Location: Sweden
Contact:

Re: Adding transitions destroys responsive design...

Post 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...
"Make My Day"

See my Website
User avatar
Pablo
 
Posts: 21575
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Adding transitions destroys responsive design...

Post 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
User avatar
Bluesman
 
 
Posts: 1116
Joined: Mon Feb 01, 2016 5:43 pm
Location: Sweden
Contact:

Re: Adding transitions destroys responsive design...

Post 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? :)
"Make My Day"

See my Website
User avatar
Pablo
 
Posts: 21575
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Adding transitions destroys responsive design...

Post by Pablo »

You can also use scroll transitions to show/hide objects on scroll.

For example:
https://www.wysiwygwebbuilder.com/suppo ... veler.html
User avatar
Bluesman
 
 
Posts: 1116
Joined: Mon Feb 01, 2016 5:43 pm
Location: Sweden
Contact:

Re: Adding transitions destroys responsive design...

Post 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 :)
"Make My Day"

See my Website
User avatar
Pablo
 
Posts: 21575
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Adding transitions destroys responsive design...

Post by Pablo »

The 'Timer Traveler' template uses scroll transitions to hide the header on scroll (via opacity).
https://www.wysiwygwebbuilder.com/suppo ... veler.html
User avatar
Bluesman
 
 
Posts: 1116
Joined: Mon Feb 01, 2016 5:43 pm
Location: Sweden
Contact:

Re: Adding transitions destroys responsive design...

Post 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
"Make My Day"

See my Website
User avatar
Bluesman
 
 
Posts: 1116
Joined: Mon Feb 01, 2016 5:43 pm
Location: Sweden
Contact:

Re: Adding transitions destroys responsive design...

Post 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...
"Make My Day"

See my Website
Post Reply