avoid overflow-y: auto when using overflow-x: hidden
is there a way I can avoid overflow x without affecting the y overflow? first img without overflow-x:hidden;
here's the code for the line
.clinica {
overflow-x: hidden;
}
.clinica__divider::before { content: ""; position: absolute; width: 100vw; height: 2px; top: 50%; left: 18rem; background: var( --e-global-color-accent ); z-index: -1 }
.clinica__divider::before { content: ""; position: absolute; width: 100vw; height: 2px; top: 50%; left: 18rem; background: var( --e-global-color-accent ); z-index: -1 }
5 Replies
maybe the way is trying to set the pseudo element width to match the end of the viewport width. will try that
You can't change one without influencing both:
Setting one axis to visible (the default) while setting the other to a different value results in visible behaving as autodepending on the structure of the page, there might be easier solutions to get it the way you want
Yeah, I was thinking about going for another solution. Thanks!
I think you could try a width that would fit in your .clinica. Like:
.clinica__divider::before {
....
width: calc(100% - 18rem);
right: 0;
}
I did it by setting the pseudo el width to rem and a media query to .clinica to hide the overflow, as I don't need overflow-y in my mobile layout
Thanks guys!