I see the problem, but there will be no easy fix.
Minihero (when used wih parallax) is using absolute positioning to set te background in the correct place and make the text slide over it.
The method used will change positioning of the rest of the page without any resize triggering, so the parallax javascript will not know.
You should also ask yourself if you really want to use this details/sumary method. It is not supported by Internet Explorer or Edge.
If you are resizing the content with MiniHero below the content you should not use the parallax effect. Without that effect it will work fine.
Hast du schon mal das Modul Accordion versucht?
Have you ever tried the Accordion module?
...but when Minihere is using absolute positioning, wouldn't relative positioning solve the issue and make Minihero more adaptable to being used in WB?The technique for parallax is to change the scrolling speed from the background image. This can only be done using absolute positioning of that background.
Understood!...but when Minihere is using absolute positioning, wouldn't relative positioning solve the issue and make Minihero more adaptable to being used in WB?The technique for parallax is to change the scrolling speed from the background image. This can only be done using absolute positioning of that background.
If you look at the page using your browser devtools you can see the parallax javascript is placing all parallax sections at the top of the page.
Using position calculation it is displayed at the correct location.
The script is responsive, so a windows resize event will recalculate the position.
If the <details> functionality was better implemented in the supported browsers it could generate an event after collapsing/expanding that could be used to recalculate the parallax positions. (i.e. by simply triggering a windows resize event).
Text above pic | ongoing Text above pic |
actual picture | ongoing Text now right next to pic |
ongoing Text below pic | ongoing Text now below pic |
MiniHero |
.section {
clear: both;
}
that will probably fix it.
This is typical behavour when using floating elements.
Clearing the floats after that content block will help.
The quick solution is to use the "section" class WB will use for every new section to clear any floating elements in previous sections.
Put somewhere in your stylesheet:Code: [Select].section {
that will probably fix it.
clear: both;
}