Archived topic
fix button when changing window size
3 replies · Started by Matthias on April 11, 2022
hi there,
i created a vertical button thx to your help.
Now i got the problem that it is moving when window size - meaning the height - is changed.
I would like to stay the lower part paralell to the lower part of the white banner (bottom left edge). Instead it starts to move to the top.
I'm not sure how to stop that behaviour.
Hi there,
You will need to make a lot of modifications to what you have so far to do that.
The Button is being absolutely positioned, relative to the slider whereas you will need
1. Select the parent Container Block ie. the one that has the Grid Block inside. And in Advanced > Additional CSS Class(es) add: relative-parent
2. You have this CSS:
.is-vertical-text {
position: absolute;
left: 0%;
top: 80%;
transform: rotate(270deg);
transform-origin: 0 0;
}Change it to:
.relative-parent > .gb-inside-container {
position: relative;
}
.is-vertical-text {
position: absolute;
left: 0;
bottom: 0;
transform: rotate(180deg);
writing-mode: vertical-lr;
}You will need to adjust your border-radius on the headline and play with margins to position it, but that CSS will keep the vertical headline relative to the grid contents.
works like a charm.
thank you so much.
Awesome - glad to hear that!
